feat: UI overhaul

temp
fix: text wrapping (#128 )
2026-01-28 19:31:53 +01:00 · 2026-01-27 11:03:06 +01:00 · 2026-01-25 10:21:12 +00:00 · 2026-01-25 10:35:54 +01:00 · 2026-01-25 09:27:23 +00:00 · 2026-01-25 09:41:46 +01:00
132 changed files with 4299 additions and 12738 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,12 +1,14 @@
-/.dioxus/
-/.git/
-/.github/
-/debug/
-/node_modules/
-/static/
-/target/
-.dockerignore
-/docker-compose-dev.yml
-/docker-compose-prod.yml
-/docker/dev/app/Dockerfile
-/docker/prod/app/Dockerfile
+/.git
+/.gitea
+/.github
+/bundle
+/node_modules
+/scripts
+/target
+
+/.dockerignore
+/docker-compose-dev.yaml
+/docker-compose-prod.yaml
+/docker-compose.yaml
+/docker/dev/*/Dockerfile
+/docker/prod/*/Dockerfile
--- a/.env.dev
+++ b/.env.dev
@@ -1,2 +1,2 @@
-DATABASE_URL=postgres://app:app@db/todo_baggins
 LANGUAGE_CODE=en-US
+MOBILE_SERVER_URL=
--- a/.github/workflows/checkov-check.yaml
+++ b/.github/workflows/checkov-check.yaml
@@ -22,7 +22,7 @@ jobs:
        with:
          python-version: "3.13.1"
      - name: Rust toolchain installation
-        uses: dtolnay/rust-toolchain@0579bb9e1907e560c2f263f705f93655a44a07e5
+        uses: dtolnay/rust-toolchain@9bc92bc5598b4f3bec5d910d352094982cb0c3b9 # 1.92.0
      - name: code checkout
        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
        with:
--- a/.github/workflows/rust-check.yaml
+++ b/.github/workflows/rust-check.yaml
@@ -21,23 +21,25 @@ jobs:
        run: >
          apt-get update && apt-get install -y
          libgtk-3-dev=3.24.33-1ubuntu2.2
-          libjavascriptcoregtk-4.1-dev=2.46.4-0ubuntu0.22.04.1
+          libjavascriptcoregtk-4.1-dev=2.50.4-0ubuntu0.22.04.1
          libsoup-3.0-dev=3.0.7-0ubuntu1
-          libwebkit2gtk-4.1-dev=2.46.4-0ubuntu0.22.04.1
+          libwebkit2gtk-4.1-dev=2.50.4-0ubuntu0.22.04.1
          libxdo-dev=1:3.20160805.1-4
      - name: Rust toolchain installation
-        uses: dtolnay/rust-toolchain@0579bb9e1907e560c2f263f705f93655a44a07e5
+        uses: dtolnay/rust-toolchain@9bc92bc5598b4f3bec5d910d352094982cb0c3b9 # 1.92.0
        with:
          components: clippy, rustfmt
      - name: code checkout
        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
        with:
          fetch-depth: 0
-      - name: npm build
-        run: npm install && npm run build
+      - name: .env symlink creation
+        run: ln -s .env.dev .env
+      - name: Tailwind CSS output creation
+        run: touch assets/tailwind.css
      - name: rustfmt check
        run: cargo fmt --all --check
      - name: Clippy check
-        run: cargo clippy --all-targets --all-features -- --deny warnings
+        run: cargo clippy --locked --all-targets --all-features -- --deny warnings
      - name: test check
-        run: cargo test --all --all-targets --all-features
+        run: cargo --locked test --all --all-targets --all-features
--- a/.github/workflows/shellcheck-check.yaml
+++ b/.github/workflows/shellcheck-check.yaml
@@ -25,4 +25,10 @@ jobs:
          fetch-depth: 0
      - name: ShellCheck check
        # https://www.shellcheck.net/wiki/Recursiveness
-        run: find . -type f -name "*.sh" -print0 | xargs -0 shellcheck
+        run: |
+          if find . -type f -name "*.sh" -print0 | grep -qz .; then
+            find . -type f -name "*.sh" -print0 | xargs -0 shellcheck
+            exit 0
+          else
+            echo "No shell scripts found. Skipping ShellCheck."
+          fi
--- a/.gitignore
+++ b/.gitignore
@@ -1,12 +1,10 @@
-/target/
-/dist/
-/static/
-/.dioxus/
-/node_modules/
+/.env

-**/*.rs.bk
+/docker-compose.yaml

-.env
-.env.prod
+/node_modules
+/target
+/bundle

-docker-compose.yaml
+/**/*.rs.bk
+/.DS_Store
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
--- a/.idea/dataSources.local.xml
+++ b/.idea/dataSources.local.xml
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="dataSourceStorageLocal" created-in="RR-243.22562.230">
-    <data-source name="todo_baggins@localhost" uuid="1658668c-c2b8-426d-a22f-16fbad9eff0b">
-      <database-info product="PostgreSQL" version="16.4 (Debian 16.4-1.pgdg120+1)" jdbc-version="4.2" driver-name="PostgreSQL JDBC Driver" driver-version="42.6.0" dbms="POSTGRES" exact-version="16.4" exact-driver-version="42.6">
-        <identifier-quote-string>&quot;</identifier-quote-string>
-      </database-info>
-      <case-sensitivity plain-identifiers="lower" quoted-identifiers="exact" />
-      <secret-storage>master_key</secret-storage>
-      <user-name>app</user-name>
-      <schema-mapping>
-        <introspection-scope>
-          <node kind="database" qname="@">
-            <node kind="schema" qname="@" />
-          </node>
-        </introspection-scope>
-      </schema-mapping>
-    </data-source>
-  </component>
-</project>
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="todo_baggins@localhost" uuid="1658668c-c2b8-426d-a22f-16fbad9eff0b">
-      <driver-ref>postgresql</driver-ref>
-      <synchronize>true</synchronize>
-      <jdbc-driver>org.postgresql.Driver</jdbc-driver>
-      <jdbc-url>jdbc:postgresql://localhost:5432/todo_baggins</jdbc-url>
-      <working-dir>$ProjectFileDir$</working-dir>
-    </data-source>
-  </component>
-</project>
--- a/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b.xml
+++ b/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b.xml
--- a/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg.meta
+++ b/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg.meta
@@ -1 +0,0 @@
-#n:todo_baggins
--- a/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/information_schema.FNRwLQ.meta
+++ b/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/information_schema.FNRwLQ.meta
@@ -1,2 +0,0 @@
-#n:information_schema
-!<md> [null, 0, null, null, -2147483648, -2147483648]
--- a/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/pg_catalog.0S1ZNQ.meta
+++ b/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/pg_catalog.0S1ZNQ.meta
@@ -1,2 +0,0 @@
-#n:pg_catalog
-!<md> [null, 0, null, null, -2147483648, -2147483648]
--- a/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/public.abK9xQ.meta
+++ b/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/public.abK9xQ.meta
@@ -1,2 +0,0 @@
-#n:public
-!<md> [785, 0, null, null, -2147483648, -2147483648]
--- a/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/public.abK9xQ.zip
+++ b/.idea/dataSources/1658668c-c2b8-426d-a22f-16fbad9eff0b/storage_v2/_src_/database/todo_baggins.NgsZOg/schema/public.abK9xQ.zip
--- a/.idea/icon.svg
+++ b/.idea/icon.svg
@@ -1,203 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="icon.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     inkscape:zoom="1.1020922"
-     inkscape:cx="188.27826"
-     inkscape:cy="204.15715"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1">
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect2"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect1"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-  </defs>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       style="display:inline;fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-       id="rect1"
-       width="512"
-       height="512"
-       x="0"
-       y="0"
-       sodipodi:insensitive="true"
-       inkscape:label="background"
-       ry="128.00018"
-       sodipodi:type="rect"
-       rx="129.98714" />
-    <g
-       id="g17"
-       inkscape:label="logo"
-       transform="translate(8)">
-      <g
-         id="g8"
-         inkscape:label="ring">
-        <g
-           id="g7"
-           inkscape:label="back">
-          <circle
-             style="fill:#d97706;fill-opacity:1;stroke:#d97706;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1"
-             cx="224"
-             cy="256"
-             r="128"
-             inkscape:label="ring back" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:21.8936;stroke-dasharray:none;stroke-opacity:1"
-             id="rect2"
-             width="48"
-             height="288"
-             x="224"
-             y="112"
-             inkscape:label="rect2" />
-        </g>
-        <g
-           id="g1"
-           transform="translate(-4.163147,-0.69235229)"
-           inkscape:label="front">
-          <circle
-             style="fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5-2"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-          <circle
-             style="fill:none;fill-opacity:1;stroke:#fbbf24;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-        </g>
-      </g>
-      <g
-         id="g16"
-         inkscape:label="tick"
-         transform="translate(16.000231,-8.3918418e-5)">
-        <g
-           id="g6"
-           transform="rotate(45,-57.96574,415.4208)"
-           style="fill:#d97706;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="back">
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect9"
-             width="32.000458"
-             height="32"
-             x="273.94067"
-             y="210.74516"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect8"
-             width="32.000458"
-             height="32"
-             x="206.05841"
-             y="233.37257"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect7"
-             height="16"
-             x="228.686"
-             y="285.255"
-             width="32"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect5"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect6"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-        <g
-           id="g4"
-           transform="rotate(45,-41.965512,454.04877)"
-           style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="front">
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect3"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect4"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/todo-baggins.iml" filepath="$PROJECT_DIR$/.idea/todo-baggins.iml" />
-    </modules>
-  </component>
-</project>
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-    <option name="myRunOnSave" value="true" />
-    <option name="myFilesPattern" value="**/*.{html,css,scss,js,ts,cjs,cts,mjs,mts,json,yaml}" />
-  </component>
-</project>
--- a/.idea/runConfigurations/dev.xml
+++ b/.idea/runConfigurations/dev.xml
@@ -1,11 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="dev" type="docker-deploy" factoryName="docker-compose.yml" server-name="Docker">
-    <deployment type="docker-compose.yml">
-      <settings>
-        <option name="envFilePath" value="" />
-        <option name="sourceFilePath" value="docker-compose-dev.yaml" />
-      </settings>
-    </deployment>
-    <method v="2" />
-  </configuration>
-</component>
--- a/.idea/sqldialects.xml
+++ b/.idea/sqldialects.xml
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="SqlDialectMappings">
-    <file url="file://$PROJECT_DIR$/migrations/00000000000000_diesel_initial_setup/down.sql" dialect="GenericSQL" />
-    <file url="file://$PROJECT_DIR$/migrations/00000000000000_diesel_initial_setup/up.sql" dialect="PostgreSQL" />
-    <file url="PROJECT" dialect="PostgreSQL" />
-  </component>
-</project>
--- a/.idea/todo-baggins.iml
+++ b/.idea/todo-baggins.iml
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="EMPTY_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
-      <excludeFolder url="file://$MODULE_DIR$/target" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CommitMessageInspectionProfile">
-    <profile version="1.0">
-      <inspection_tool class="CommitFormat" enabled="true" level="WARNING" enabled_by_default="true" />
-      <inspection_tool class="CommitNamingConvention" enabled="true" level="WARNING" enabled_by_default="true" />
-    </profile>
-  </component>
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>
--- a/.idea/webResources.xml
+++ b/.idea/webResources.xml
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="WebResourcesPaths">
-    <contentEntries>
-      <entry url="file://$PROJECT_DIR$">
-        <entryData>
-          <resourceRoots>
-            <path value="file://$PROJECT_DIR$/assets" />
-          </resourceRoots>
-        </entryData>
-      </entry>
-    </contentEntries>
-  </component>
-</project>
--- a/.zed/settings.json
+++ b/.zed/settings.json
@@ -0,0 +1,11 @@
+{
+  "lsp": {
+    "rust-analyzer": {
+      "initialization_options": {
+        "cargo": {
+          "features": ["server", "web"]
+        }
+      }
+    }
+  }
+}
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,49 +1,61 @@
 [package]
-name = "todo-baggins"
+name = "todo_baggins"
 version = "0.1.0"
 authors = ["Matouš Volf <git@matousvolf.cz>"]
-edition = "2021"
+edition = "2024"

 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

 [dependencies]
-chrono = { version = "0.4.39", features = ["serde", "unstable-locales"] }
-dioxus = { version = "0.6.1", features = ["fullstack", "router"] }
-feruca = { version = "0.10.1" }
-serde = { version = "1.0.217" }
-serde_json = { version = "1.0.134" }
-serde_with = { version = "3.12.0", features = ["chrono_0_4"] }
-tracing = "0.1.41"
-unic-langid-impl = { version = "0.9.5", features = ["serde"] }
-validator = { version = "0.19.0", features = ["derive"] }
+chrono = { version = "0.4.43", features = ["serde", "unstable-locales"] }
+# Remember to update the CLI as well.
+dioxus = { version = "0.7.3", features = ["fullstack", "router"] }
+# TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4765 is resolved.
+dioxus-html = { version = "0.7.3", features = ["serialize"] }
+feruca = { version = "0.11.5" }
+serde = { version = "1.0.228" }
+serde_json = { version = "1.0.149" }
+serde_with = { version = "3.16.1", features = ["chrono_0_4"] }
+tracing = "0.1.44"
+unic-langid-impl = { version = "0.9.6", features = ["serde"] }
+validator = { version = "0.20.0", features = ["derive"] }

-diesel = { version = "2.2.6", features = ["chrono", "postgres", "postgres_backend", "serde_json"], optional = true }
-diesel_migrations = { version = "2.2.0", features = ["postgres"], optional = true }
-dotenvy = { version = "0.15.7", optional = true }
-time = { version = "0.3.37", optional = true }
+# Remember to update the CLI as well.
+diesel = { version = "2.3.6", features = [
+    "chrono",
+    "postgres",
+    "postgres_backend",
+    "serde_json",
+], optional = true }
+diesel_migrations = { version = "2.3.1", features = [
+    "postgres",
+], optional = true }
+rand = { version = "0.9.2", optional = true }
+time = { version = "0.3.45", optional = true }
+tokio = { version = "1.49.0", optional = true }

-async-std = { version = "1.13.0", optional = true }
-dioxus-i18n = { version = "0.3.0", optional = true }
-dioxus-query = { version = "0.6.0", optional = true }
-voca_rs = { version = "1.15.2", optional = true }
+async-std = { version = "1.13.2", optional = true }
+dioxus-i18n = "0.5.1"
+voca_rs = "1.15.2"
+load-dotenv = "0.1.2"
+# TODO: Switch to upstream once it merges the changes.
+dioxus-free-icons = { git = "https://github.com/matous-volf/dioxus-free-icons", rev = "6488400003a3d6829e771a84a565c5c5f08a9aa0", features = [
+    "font-awesome-regular",
+    "font-awesome-solid",
+] }

 [features]
 default = ["web"]
+web = ["dioxus/web", "dep:async-std"]
+mobile = ["dioxus/mobile", "dep:async-std"]
 desktop = ["dioxus/desktop"]
-mobile = ["dioxus/mobile"]
-web = [
-    "dioxus/web",
-    "dep:async-std",
-    "dep:dioxus-query",
-    "dep:dioxus-i18n",
-    "dep:voca_rs"
-]
 server = [
    "dioxus/server",
    "dep:diesel",
    "dep:diesel_migrations",
-    "dep:dotenvy",
+    "dep:rand",
    "dep:time",
+    "dep:tokio",
 ]

 [profile]
--- a/Dioxus.toml
+++ b/Dioxus.toml
@@ -1,27 +1,6 @@
 [application]

-# App (Project) Name
-name = "todo-baggins"
-
-# Dioxus App Default Platform
-# web, desktop, fullstack
-default_platform = "fullstack"
-
-# `build` & `serve` dist path
-out_dir = "dist"
-
-# resource (assets) file folder
-asset_dir = "assets"
-
 [web.app]

-# HTML title tag content
+# HTML title tag content.
 title = "Todo Baggins"
-
-[web.watcher]
-
-# when watcher trigger, regenerate the `index.html`
-reload_html = true
-
-# which files or dirs will be watcher monitoring
-watch_path = ["src", "assets"]
--- a/assets/.gitignore
+++ b/assets/.gitignore
@@ -0,0 +1 @@
+/tailwind.css
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/images/icon.png
+++ b/assets/images/icon.png
--- a/assets/images/icon.svg
+++ b/assets/images/icon.svg
@@ -1,203 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="icon.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     inkscape:zoom="1.1020922"
-     inkscape:cx="188.27826"
-     inkscape:cy="204.15715"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1">
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect2"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-    <inkscape:path-effect
-       effect="fillet_chamfer"
-       id="path-effect1"
-       is_visible="true"
-       lpeversion="1"
-       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
-       radius="0"
-       unit="px"
-       method="auto"
-       mode="F"
-       chamfer_steps="1"
-       flexible="false"
-       use_knot_distance="true"
-       apply_no_radius="true"
-       apply_with_radius="true"
-       only_selected="false"
-       hide_knots="false" />
-  </defs>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       style="display:inline;fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-       id="rect1"
-       width="512"
-       height="512"
-       x="0"
-       y="0"
-       sodipodi:insensitive="true"
-       inkscape:label="background"
-       ry="128.00018"
-       sodipodi:type="rect"
-       rx="129.98714" />
-    <g
-       id="g17"
-       inkscape:label="logo"
-       transform="translate(8)">
-      <g
-         id="g8"
-         inkscape:label="ring">
-        <g
-           id="g7"
-           inkscape:label="back">
-          <circle
-             style="fill:#d97706;fill-opacity:1;stroke:#d97706;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1"
-             cx="224"
-             cy="256"
-             r="128"
-             inkscape:label="ring back" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:21.8936;stroke-dasharray:none;stroke-opacity:1"
-             id="rect2"
-             width="48"
-             height="288"
-             x="224"
-             y="112"
-             inkscape:label="rect2" />
-        </g>
-        <g
-           id="g1"
-           transform="translate(-4.163147,-0.69235229)"
-           inkscape:label="front">
-          <circle
-             style="fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5-2"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-          <circle
-             style="fill:none;fill-opacity:1;stroke:#fbbf24;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="path1-5"
-             cx="276.16315"
-             cy="256.69235"
-             r="128" />
-        </g>
-      </g>
-      <g
-         id="g16"
-         inkscape:label="tick"
-         transform="translate(16.000231,-8.3918418e-5)">
-        <g
-           id="g6"
-           transform="rotate(45,-57.96574,415.4208)"
-           style="fill:#d97706;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="back">
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect9"
-             width="32.000458"
-             height="32"
-             x="273.94067"
-             y="210.74516"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect8"
-             width="32.000458"
-             height="32"
-             x="206.05841"
-             y="233.37257"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect7"
-             height="16"
-             x="228.686"
-             y="285.255"
-             width="32"
-             transform="rotate(-45,-57.96574,415.4208)" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect5"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect6"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-        <g
-           id="g4"
-           transform="rotate(45,-41.965512,454.04877)"
-           style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-opacity:1"
-           inkscape:label="front">
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
-             id="rect3"
-             width="64"
-             height="32"
-             x="0"
-             y="100" />
-          <rect
-             style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
-             id="rect4"
-             width="32"
-             height="96"
-             x="32"
-             y="36" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
--- a/assets/manifest.json
+++ b/assets/manifest.json
@@ -3,12 +3,13 @@
  "short_name": "Todo Baggins",
  "start_url": "/",
  "display": "standalone",
-  "background_color": "#27272a",
-  "theme_color": "#27272a",
+  "background_color": "#101828",
+  "theme_color": "#b89a2e",
  "icons": [
    {
-      "src": "/images/icon.png",
+      "src": "/assets/images/icon.png",
      "sizes": "any",
+      "purpose": "maskable",
      "type": "image/png"
    }
  ]
--- a/assets/styles/.gitignore
+++ b/assets/styles/.gitignore
@@ -1 +0,0 @@
-/tailwind_output.css
--- a/assets/styles/fonts.css
+++ b/assets/styles/fonts.css
@@ -1,17 +0,0 @@
-@layer base {
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url("/assets/fonts/inter_variable.woff2") format("woff2");
-  }
-
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url("/assets/fonts/inter_variable_italic.woff2") format("woff2");
-  }
-}
--- a/assets/styles/input_range.css
+++ b/assets/styles/input_range.css
@@ -8,56 +8,33 @@ input[type="range"] {
  background: transparent;
 }

-input[type="range"]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb, input[type="range"]::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
-  background: rgba(228 228 231);
+  background: var(--color-gray-400);
+  filter: drop-shadow(0 var(--spacing) 0 var(--color-gray-500));
  border: 0;
  border-radius: 0.5rem;
+  cursor: pointer;
 }

-input[type="range"]::-moz-range-progress {
-  background: #525259;
+input[type="range"]::-webkit-slider-thumb {
+  position: relative;
+  top: -9px;
+}
+
+input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track {
+  background: var(--color-gray-800-muted);
  height: 0.5rem;
+  filter: drop-shadow(0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted));
  border-radius: 0.25rem;
 }

 input[type="range"]::-moz-range-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-moz-range-progress {
-  background: #2d2d31;
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-moz-range-track {
-  background: rgba(113 113 122 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  width: 1.25rem;
-  height: 1.25rem;
-  background: rgba(228 228 231);
-  border: 0;
-  border-radius: 0.5rem;
-  position: relative;
-  top: -0.4rem;
+  transform: translateY(3px);
 }

 input[type="range"]::-webkit-slider-runnable-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-input[type="range"].input-range-reverse::-webkit-slider-runnable-track {
-  background: rgba(39 39 42 / 50%);
-  height: 0.5rem;
-  border-radius: 0.25rem;
+  position: relative;
+  top: 3px;
 }
--- a/assets/styles/select_arrow.css
+++ b/assets/styles/select_arrow.css
@@ -0,0 +1,9 @@
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%239ca3af' d='M300.3 440.8C312.9 451 331.4 450.3 343.1 438.6L471.1 310.6C480.3 301.4 483 287.7 478 275.7C473 263.7 461.4 256 448.5 256L192.5 256C179.6 256 167.9 263.8 162.9 275.8C157.9 287.8 160.7 301.5 169.9 310.6L297.9 438.6L300.3 440.8z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 2rem;
+  background-position: right .5rem center;
+}
--- a/docker-compose-android-bundle.yaml
+++ b/docker-compose-android-bundle.yaml
@@ -0,0 +1,6 @@
+---
+services:
+  app:
+    build:
+      dockerfile: docker/prod/app/Dockerfile
+      target: builder_android
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -12,14 +12,13 @@ services:
      - ./Cargo.toml:/srv/app/Cargo.toml
      - ./diesel.toml:/srv/app/diesel.toml
      - ./Dioxus.toml:/srv/app/Dioxus.toml
-      - ./package.json:/srv/app/package.json
-      - ./package-lock.json:/srv/app/package-lock.json
+      - ./tailwind.css:/srv/app/tailwind.css
    restart: always
    ports: ["8000:8000"]
    depends_on: ["db"]

  db:
-    image: postgres:16.4-bookworm
+    image: postgres:16.11-alpine3.23@sha256:a5074487380d4e686036ce61ed6f2d363939ae9a0c40123d1a9e3bb3a5f344b4
    volumes: ["db_data:/var/lib/postgresql/data"]
    ports: ["5432:5432"]
    environment:
--- a/docker-compose-prod.yaml
+++ b/docker-compose-prod.yaml
@@ -6,11 +6,12 @@ services:
    networks:
      - default
      - web-server-network
+    ports: ["8000:80"]
    restart: always
    depends_on: ["db"]

  db:
-    image: postgres:16.4-bookworm
+    image: postgres:16.11-alpine3.23@sha256:a5074487380d4e686036ce61ed6f2d363939ae9a0c40123d1a9e3bb3a5f344b4
    volumes: ["db_data:/var/lib/postgresql/data"]
    networks:
      - default
--- a/docker/dev/app/Dockerfile
+++ b/docker/dev/app/Dockerfile
@@ -1,27 +1,16 @@
-FROM rust@sha256:a45bf1f5d9af0a23b26703b3500d70af1abff7f984a7abef5a104b42c02a292b
+FROM rust:1.92.0-bookworm@sha256:9676d0547a259997add8f5924eb6b959c589ed39055338e23b99aba7958d6d31

-RUN cargo install dioxus-cli diesel_cli \
- && apt-get update && apt-get install -y --no-install-recommends \
-    nodejs=18.19.0+dfsg-6~deb12u2 \
-    npm=9.2.0~ds1-1 \
-    supervisor=4.2.5-1 \
- && apt-get clean \
- && rm -rf /var/lib/apt/lists/*
+RUN useradd -m -u 1000 -s /bin/bash app_user \
+ && rustup target add wasm32-unknown-unknown

-COPY . /srv/app
+USER app_user
+
+RUN cargo install --git https://github.com/diesel-rs/diesel --rev 207604888d28a490061698f07a25090438be42fe --locked diesel_cli \
+ && cargo install --git https://github.com/DioxusLabs/dioxus --rev 22b06badde44ba1af0fcf339c91b66483175b660 --locked dioxus-cli
+
+COPY --chown=app_user . /srv/app
 WORKDIR /srv/app

-RUN npm install
-
-COPY docker/dev/app/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
-
-RUN chown -R 1000:1000 /srv/app \
- && chown -R 1000:1000 /usr/local/cargo \
- && mkdir -p /.local/share/dioxus \
- && chown -R 1000:1000 /.local/share/dioxus
-
 HEALTHCHECK CMD curl --fail -H "Accept: text/html" http://localhost:8000 || exit 1

-USER 1000:1000
-
-CMD ["sh", "docker/dev/app/entrypoint.sh"]
+CMD ["sleep", "infinity"]
--- a/docker/dev/app/entrypoint.sh
+++ b/docker/dev/app/entrypoint.sh
@@ -1,3 +0,0 @@
-#!/bin/bash
-
-supervisord -c /etc/supervisor/conf.d/supervisord.conf
--- a/docker/dev/app/supervisord.conf
+++ b/docker/dev/app/supervisord.conf
@@ -1,23 +0,0 @@
-[supervisord]
-nodaemon=true
-logfile=/dev/null
-logfile_maxbytes=0
-pidfile=/dev/null
-
-[program:npm]
-command=npm run watch
-directory=/srv/app
-autostart=true
-autorestart=true
-stdout_logfile=/dev/fd/1
-stdout_logfile_maxbytes=0
-redirect_stderr=true
-
-[program:dx]
-command=dx serve --addr 0.0.0.0 --port 8000
-directory=/srv/app
-autostart=true
-autorestart=true
-stdout_logfile=/dev/fd/1
-stdout_logfile_maxbytes=0
-redirect_stderr=true
--- a/docker/prod/app/Dockerfile
+++ b/docker/prod/app/Dockerfile
@@ -1,32 +1,67 @@
-FROM rust@sha256:a45bf1f5d9af0a23b26703b3500d70af1abff7f984a7abef5a104b42c02a292b AS builder
+FROM rust:1.92.0-bookworm@sha256:9676d0547a259997add8f5924eb6b959c589ed39055338e23b99aba7958d6d31 AS builder_base

-RUN cargo install dioxus-cli diesel_cli \
- && apt-get update && apt-get install -y --no-install-recommends \
-    nodejs=18.19.0+dfsg-6~deb12u2 \
-    npm=9.2.0~ds1-1 \
- && apt-get clean \
- && rm -rf /var/lib/apt/lists/*
+RUN cargo install --git https://github.com/diesel-rs/diesel --rev 207604888d28a490061698f07a25090438be42fe --locked diesel_cli \
+ && cargo install --git https://github.com/DioxusLabs/dioxus --rev 22b06badde44ba1af0fcf339c91b66483175b660 --locked dioxus-cli --features disable-telemetry

 COPY . /srv/app
 WORKDIR /srv/app

-RUN npm install \
- && npm run build \
- && dx build --release

-FROM debian@sha256:b877a1a3fdf02469440f1768cf69c9771338a875b7add5e80c45b756c92ac20a AS runner
+FROM builder_base AS builder_android
+
+ARG ANDROID_NDK_VERSION=26.2.11394342
+ARG ANDROID_COMMAND_LINE_TOOLS_VERSION=13114758
+ARG ANDROID_COMMAND_LINE_TOOLS_SHA256=7ec965280a073311c339e571cd5de778b9975026cfcbe79f2b1cdcb1e15317ee
+ARG ANDROID_VERSION=34
+ARG ANDROID_BUILD_TOOLS_VERSION=34.0.0
+ARG ANDROID_BUNDLETOOL_VERSION=1.18.3
+ARG ANDROID_BUNDLETOOL_SHA256=a099cfa1543f55593bc2ed16a70a7c67fe54b1747bb7301f37fdfd6d91028e29
+ENV ANDROID_SDK_ROOT=/opt/android-sdk
+
+SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    openjdk-17-jdk-headless=17.0.17+10-1~deb12u1 \
+ && apt-get clean \
+ && rm -rf /var/lib/apt/lists/* \
+ && rustup target add aarch64-linux-android \
+ && mkdir -p "$ANDROID_SDK_ROOT/cmdline-tools" \
+ && curl -fsSL -o /tmp/cmdline-tools.zip "https://dl.google.com/android/repository/commandlinetools-linux-${ANDROID_COMMAND_LINE_TOOLS_VERSION}_latest.zip" \
+ && unzip -q /tmp/cmdline-tools.zip -d "$ANDROID_SDK_ROOT/cmdline-tools" \
+ && export PATH="$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$ANDROID_SDK_ROOT/platform-tools:$PATH" \
+ && mv "$ANDROID_SDK_ROOT/cmdline-tools/cmdline-tools" "$ANDROID_SDK_ROOT/cmdline-tools/latest" \
+ && rm /tmp/cmdline-tools.zip \
+ # `yes` can exit with 141, which is okay, so the `test` is added to ignore it.
+ && yes | sdkmanager --sdk_root="$ANDROID_SDK_ROOT" --licenses > /dev/null; test "${PIPESTATUS[1]}" -eq 0 \
+ && sdkmanager --sdk_root="$ANDROID_SDK_ROOT" "platform-tools" "platforms;android-$ANDROID_VERSION" "build-tools;$ANDROID_BUILD_TOOLS_VERSION" "ndk;$ANDROID_NDK_VERSION" \
+ && curl -fsSL -o /tmp/bundletool-all.jar "https://github.com/google/bundletool/releases/download/$ANDROID_BUNDLETOOL_VERSION/bundletool-all-${ANDROID_BUNDLETOOL_VERSION}.jar" \
+ && echo "$ANDROID_BUNDLETOOL_SHA256 /tmp/bundletool-all.jar" | sha256sum -c - \
+ && keytool -genkeypair -noprompt -keystore /tmp/android_keystore.jks -alias key -keyalg RSA -keysize 2048 -validity 3660 -dname "CN=" -storepass 123456 -keypass 123456 \
+ && export ANDROID_HOME="$ANDROID_SDK_ROOT" \
+ && export ANDROID_NDK_HOME="$ANDROID_SDK_ROOT/ndk/$ANDROID_NDK_VERSION" \
+ && dx bundle --locked --platform android --target aarch64-linux-android --release \
+ && java -jar /tmp/bundletool-all.jar build-apks --bundle=/srv/app/target/dx/todo_baggins/release/android/app/app/build/outputs/bundle/release/TodoBaggins-aarch64-linux-android.aab --output=/tmp/todo_baggins.apks --mode=universal --ks=/tmp/android_keystore.jks --ks-key-alias=key --ks-pass=pass:123456 \
+ && mkdir -p /srv/app/bundle \
+ && unzip -qp /tmp/todo_baggins.apks universal.apk > /srv/app/bundle/todo_baggins.apk
+
+
+FROM builder_base AS builder_web
+ 
+RUN dx bundle --locked --release
+
+
+FROM debian:bookworm@sha256:b877a1a3fdf02469440f1768cf69c9771338a875b7add5e80c45b756c92ac20a AS runner_web

 RUN apt-get update \
- && apt-get install -y --no-install-recommends libpq5=15.8-0+deb12u1 \
+ && apt-get install -y --no-install-recommends libpq5=15.10-0+deb12u1 \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

-COPY --from=builder /srv/app/target/dx/todo-baggins/release/web /srv/app
-COPY .env /srv/app/.env
+COPY --from=builder_web /srv/app/target/dx/todo_baggins/release/web /srv/app/web

-RUN chown -R 1000:1000 /srv/app
+RUN chown -R 1000:1000 /srv/app/web

-WORKDIR /srv/app
+WORKDIR /srv/app/web

 HEALTHCHECK CMD curl --fail -H "Accept: text/html" http://localhost || exit 1

@@ -34,4 +69,4 @@ USER 1000:1000

 ENV IP="0.0.0.0"
 ENV PORT="80"
-CMD ["./server"]
+CMD ["./todo_baggins"]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,4 @@
 {
-  "dependencies": {
-    "tailwindcss": "3.4.10"
-  },
-  "scripts": {
-    "build": "tailwindcss -c src/styles/tailwind.config.js -i src/styles/tailwind.css -o assets/styles/tailwind_output.css",
-    "watch": "npm run build -- --watch"
-  },
  "devDependencies": {
    "htmlhint": "1.1.4",
    "markdownlint-cli": "0.43.0",
--- a/scripts/export_android_bundle.sh
+++ b/scripts/export_android_bundle.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+
+echo "Warning: This script needs to stop any currently running Docker compose stacks. Stopping them now..."
+docker compose down
+
+mkdir -p bundle/android bundle/temp \
+&& docker compose -f docker-compose-prod.yaml -f docker-compose-android-bundle.yaml up --build --no-start --no-deps app \
+&& docker compose -f docker-compose-prod.yaml -f docker-compose-android-bundle.yaml cp app:/srv/app/bundle bundle/temp \
+&& mv bundle/temp/bundle/* bundle/android \
+&& rm -r bundle/temp
+
+echo "Warning: If a running Docker compose stack has been stopped by this script, you may want to bring it up again now."
--- a/src/components/app.rs
+++ b/src/components/app.rs
@@ -1,28 +1,28 @@
-use crate::query::{QueryErrors, QueryKey, QueryValue};
+use crate::internationalization::get_language_identifier;
+
 use crate::route::Route;
-use crate::server::internationalization::get_language_identifier;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
 use dioxus_i18n::prelude::*;
 use dioxus_i18n::unic_langid::langid;
-use dioxus_query::prelude::use_init_query_client;

 const FAVICON: Asset = asset!("/assets/favicon.ico");
-const TAILWIND_CSS: Asset = asset!("/assets/styles/tailwind_output.css");
-const FONTS_CSS: Asset = asset!("/assets/styles/fonts.css");
+#[used]
+static FONTS_DIRECTORY: Asset = asset!(
+    "/assets/fonts",
+    AssetOptions::builder().with_hash_suffix(false)
+);
+const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 const INPUT_NUMBER_ARROWS_CSS: Asset = asset!("/assets/styles/input_number_arrows.css");
 const INPUT_RANGE_CSS: Asset = asset!("/assets/styles/input_range.css");
+const SELECT_ARROW_CSS: Asset = asset!("/assets/styles/select_arrow.css");
+const MANIFEST: Asset = asset!("/assets/manifest.json");

 #[component]
 pub(crate) fn App() -> Element {
-    use_init_query_client::<QueryValue, QueryErrors, QueryKey>();
-
-    let language_identifier = use_server_future(get_language_identifier)?
-        .unwrap()
-        .unwrap();
    use_init_i18n(|| {
-        I18nConfig::new(language_identifier)
+        I18nConfig::new(get_language_identifier())
            .with_locale(Locale::new_static(
                langid!("cs-CZ"),
                include_str!("../internationalization/cs_cz.ftl"),
@@ -35,14 +35,14 @@ pub(crate) fn App() -> Element {

    rsx! {
        document::Link { rel: "icon", href: FAVICON }
-        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
-        document::Link { rel: "stylesheet", href: FONTS_CSS }
-        document::Link { rel: "stylesheet", href: INPUT_NUMBER_ARROWS_CSS }
-        document::Link { rel: "stylesheet", href: INPUT_RANGE_CSS }
-        document::Script { src: "https://kit.fontawesome.com/3c1b409f8f.js" }
+        document::Stylesheet { href: TAILWIND_CSS }
+        document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS }
+        document::Stylesheet { href: INPUT_RANGE_CSS }
+        document::Stylesheet { href: SELECT_ARROW_CSS }
+        document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }

        div {
-            class: "min-h-screen text-zinc-200 bg-zinc-800 pt-4 pb-36",
+            class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900",
            Router::<Route> {}
        }
    }
--- a/src/components/bottom_panel.rs
+++ b/src/components/bottom_panel.rs
@@ -1,74 +1,22 @@
 use crate::components::navigation::Navigation;
-use crate::components::project_form::ProjectForm;
-use crate::components::task_form::TaskForm;
-use crate::models::project::Project;
-use crate::models::task::Task;
-use crate::route::Route;
 use dioxus::prelude::*;

 #[component]
-pub(crate) fn BottomPanel(display_form: Signal<bool>) -> Element {
-    // A signal for delaying the application of styles.
-    #[allow(clippy::redundant_closure)]
-    let mut expanded = use_signal(|| display_form());
+pub(crate) fn BottomPanel() -> Element {
    let navigation_expanded = use_signal(|| false);
-    let current_route = use_route();
-
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
-
-    use_effect(use_reactive(&display_form, move |display_form| {
-        if display_form() {
-            expanded.set(true);
-        } else {
-            spawn(async move {
-                // Necessary for a smooth – not instant – height transition.
-                async_std::task::sleep(std::time::Duration::from_millis(500)).await;
-                /* The check is necessary for the situation when the user expands the panel while
-                it is being closed. */
-                if !display_form() {
-                    expanded.set(false);
-                }
-            });
-        }
-    }));

    rsx! {
        div {
            class: format!(
-                "pointer-events-auto bg-zinc-700/50 rounded-t-xl border-t-zinc-600 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
-                match (display_form(), current_route, navigation_expanded()) {
-                    (false, _, false) => "h-[66px]",
-                    (false, _, true) => "h-[130px]",
-                    (true, Route::ProjectsPage, _) => "h-[130px]",
-                    (true, _, _) => "h-[506px]",
+                "flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
+                if navigation_expanded() {
+                    "h-[130px]"
+                } else {
+                    "h-[66px]"
                }
            ),
-            if expanded() {
-                match current_route {
-                    Route::ProjectsPage => rsx! {
-                        ProjectForm {
-                            project: project_being_edited(),
-                            on_successful_submit: move |_| {
-                                display_form.set(false);
-                                project_being_edited.set(None);
-                            }
-                        }
-                    },
-                    _ => rsx! {
-                        TaskForm {
-                            task: task_being_edited(),
-                            on_successful_submit: move |_| {
-                                display_form.set(false);
-                                task_being_edited.set(None);
-                            }
-                        }
-                    }
-                }
-            } else {
            Navigation {
-                    expanded: navigation_expanded,
-                }
+                is_expanded: navigation_expanded,
            }
        }
    }
--- a/src/components/button_primary.rs
+++ b/src/components/button_primary.rs
@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ButtonPrimary(
+    class: Option<String>,
+    children: Element,
+    #[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    onclick: Option<Callback<Event<MouseData>>>,
+) -> Element {
+    rsx! {
+        button {
+            class: format!(
+                "cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] active:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] transition-all duration-150 {}",
+                class.unwrap_or("".to_owned())
+            ),
+            onclick: move |event| {
+                if let Some(onclick) = onclick {
+                    onclick.call(event);
+                }
+            },
+            ..attributes,
+            div {
+                class: "py-3.5 px-4 flex flex-row justify-center items-center bg-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] text-amber-700-muted rounded-xl transition-all duration-150",
+                {children}
+            }
+        }
+    }
+}
--- a/src/components/button_secondary.rs
+++ b/src/components/button_secondary.rs
@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ButtonSecondary(
+    class: Option<String>,
+    children: Element,
+    #[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    onclick: Option<Callback<Event<MouseData>>>,
+) -> Element {
+    rsx! {
+        button {
+            class: format!(
+                "cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_7px_0_var(--color-gray-800)] active:*:drop-shadow-[0_2px_0_var(--color-gray-800)] transition-all duration-150 {}",
+                class.unwrap_or("".to_owned())
+            ),
+            onclick: move |event| {
+                if let Some(onclick) = onclick {
+                    onclick.call(event);
+                }
+            },
+            ..attributes,
+            div {
+                class: "py-3.5 px-4 flex flex-row justify-center items-center bg-gray-600 drop-shadow-[0_6px_0_var(--color-gray-800)] rounded-xl transition-all duration-150",
+                {children}
+            }
+        }
+    }
+}
--- a/src/components/category_calendar_task_list.rs
+++ b/src/components/category_calendar_task_list.rs
@@ -0,0 +1,65 @@
+use crate::components::task_list::TaskList;
+use crate::hooks::use_tasks_with_subtasks_in_category;
+use crate::internationalization::LocaleFromLanguageIdentifier;
+use crate::models::category::Category;
+use crate::models::task::TaskWithSubtasks;
+use chrono::{Datelike, Local};
+use dioxus::core_macro::{component, rsx};
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_i18n::prelude::i18n;
+use dioxus_i18n::t;
+
+const CALENDAR_LENGTH_DAYS: usize = 366 * 3;
+
+#[component]
+pub(crate) fn CategoryCalendarTaskList() -> Element {
+    let today_date = Local::now().date_naive();
+    let tasks = use_tasks_with_subtasks_in_category(Category::Calendar {
+        date: today_date,
+        reoccurrence: None,
+        time: None,
+    })?;
+
+    rsx! {
+        div {
+            class: "pt-4 flex flex-col gap-8",
+            for date_current in today_date.iter_days().take(CALENDAR_LENGTH_DAYS) {
+                div {
+                    class: "flex flex-col gap-4",
+                    div {
+                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        div {
+                            class: "pt-1",
+                            {
+                                date_current.format_localized(
+                                    t!(
+                                        if date_current.year() == Local::now().year() {
+                                            "date-weekday-format"
+                                        } else {
+                                            "date-weekday-year-format"
+                                        }
+                                    ).as_str(),
+                                    LocaleFromLanguageIdentifier::from(
+                                        &i18n().language()
+                                    ).into()
+                                )
+                                .to_string()
+                            }
+                        }
+                    }
+                    TaskList {
+                        tasks: tasks.iter().filter(|task| {
+                            if let Category::Calendar { date, .. }
+                                = task.task.category {
+                                date == date_current
+                            } else {
+                                panic!("Unexpected category.");
+                            }
+                        }).cloned().collect::<Vec<TaskWithSubtasks>>()
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/components/category_input.rs
+++ b/src/components/category_input.rs
@@ -1,7 +1,12 @@
+use crate::components::select_button::SelectButton;
 use crate::models::category::Category;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaCalendarDays, FaHourglassHalf, FaInbox, FaSignsPost, FaWater,
+};

 #[component]
 pub(crate) fn CategoryInput(
@@ -10,93 +15,51 @@ pub(crate) fn CategoryInput(
 ) -> Element {
    rsx! {
        div {
-            class: format!("flex flex-row gap-2 {}", class.unwrap_or("")),
-            button {
-                r#type: "button",
-                class: format!(
-                    "py-2 rounded-lg grow basis-0 {}",
-                    if selected_category() == Category::SomedayMaybe { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
+            class: format!("grid grid-cols-3 gap-3 {}", class.unwrap_or("")),
+            SelectButton {
+                icon: FaLightbulb,
+                is_selected: matches!(selected_category(), Category::SomedayMaybe),
+                on_select: move |_| {
                    selected_category.set(Category::SomedayMaybe);
-                },
-                i {
-                    class: "fa-solid fa-question"
                }
-            },
-            button {
-                r#type: "button",
-                class: format!(
-                    "py-2 rounded-lg grow basis-0 {}",
-                    if selected_category() == Category::LongTerm { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
+            }
+            SelectButton {
+                icon: FaWater,
+                is_selected: matches!(selected_category(), Category::LongTerm),
+                on_select: move |_| {
                    selected_category.set(Category::LongTerm);
-                },
-                i {
-                    class: "fa-solid fa-water"
                }
-            },
-            button {
-                r#type: "button",
-                class: format!(
-                    "py-2 rounded-lg grow basis-0 {}",
-                    if let Category::WaitingFor(_) = selected_category() { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
+            }
+            SelectButton {
+                icon: FaHourglassHalf,
+                is_selected: matches!(selected_category(), Category::WaitingFor(_)),
+                on_select: move |_| {
                    selected_category.set(Category::WaitingFor(String::new()));
-                },
-                i {
-                    class: "fa-solid fa-hourglass-half"
                }
-            },
-            button {
-                r#type: "button",
-                class: format!(
-                    "py-2 rounded-lg grow basis-0 {}",
-                    if selected_category() == Category::NextSteps { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
+            }
+            SelectButton {
+                icon: FaSignsPost,
+                is_selected: matches!(selected_category(), Category::NextSteps),
+                on_select: move |_| {
                    selected_category.set(Category::NextSteps);
-                },
-                i {
-                    class: "fa-solid fa-forward"
                }
-            },
-            button {
-                r#type: "button",
-                class: format!(
-                    "py-2 rounded-lg grow basis-0 {}",
-                    if let Category::Calendar { .. } = selected_category() { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
+            }
+            SelectButton {
+                icon: FaCalendarDays,
+                is_selected: matches!(selected_category(), Category::Calendar { .. }),
+                on_select: move |_| {
                    selected_category.set(Category::Calendar {
                        date: chrono::Local::now().date_naive(),
                        reoccurrence: None,
                        time: None,
                    });
-                },
-                i {
-                    class: "fa-solid fa-calendar-days"
                }
-            },
-            button {
-                r#type: "button",
-                class: format!(
-                    "py-2 rounded-lg grow basis-0 {}",
-                    if selected_category() == Category::Inbox { "bg-zinc-500/50" }
-                    else { "bg-zinc-800/50" }
-                ),
-                onclick: move |_| {
+            }
+            SelectButton {
+                icon: FaInbox,
+                is_selected: matches!(selected_category(), Category::Inbox),
+                on_select: move |_| {
                    selected_category.set(Category::Inbox);
-                },
-                i {
-                    class: "fa-solid fa-inbox"
                }
            }
        }
--- a/src/components/category_today_task_list.rs
+++ b/src/components/category_today_task_list.rs
@@ -0,0 +1,125 @@
+use crate::components::task_list::TaskList;
+use crate::hooks::use_tasks_with_subtasks_in_category;
+use crate::internationalization::LocaleFromLanguageIdentifier;
+use crate::models::category::Category;
+use crate::models::task::TaskWithSubtasks;
+use chrono::Local;
+use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::{FaCalendarCheck, FaCalendarXmark, FaWater};
+use dioxus_i18n::t;
+use dioxus_i18n::use_i18n::i18n;
+use voca_rs::Voca;
+
+#[component]
+pub(crate) fn CategoryTodayTaskList() -> Element {
+    let today_date = Local::now().date_naive();
+    let calendar_tasks = use_tasks_with_subtasks_in_category(Category::Calendar {
+        date: today_date,
+        reoccurrence: None,
+        time: None,
+    })?;
+    let today_tasks = calendar_tasks
+        .iter()
+        .filter(|task| {
+            if let Category::Calendar { date, .. } = task.task.category {
+                date == today_date
+            } else {
+                panic!("Unexpected category.");
+            }
+        })
+        .cloned()
+        .collect::<Vec<TaskWithSubtasks>>();
+    let overdue_tasks = calendar_tasks
+        .iter()
+        .filter(|task| {
+            if let Category::Calendar { date, .. } = task.task.category {
+                date < today_date
+            } else {
+                panic!("Unexpected category.");
+            }
+        })
+        .cloned()
+        .collect::<Vec<TaskWithSubtasks>>();
+    let long_term_tasks = use_tasks_with_subtasks_in_category(Category::LongTerm)?;
+
+    rsx! {
+        div {
+            class: "pt-4 flex flex-col gap-8",
+            if !long_term_tasks.is_empty() {
+                div {
+                    class: "flex flex-col gap-4",
+                    div {
+                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        Icon {
+                            class: "mx-1.5",
+                            icon: FaWater
+                        }
+                        div {
+                            {t!("long-term")._upper_first()}
+                        }
+                    }
+                    TaskList {
+                        tasks: long_term_tasks
+                    }
+                }
+            }
+            if !overdue_tasks.is_empty() {
+                div {
+                    class: "flex flex-col gap-4",
+                    div {
+                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        Icon {
+                            class: "mx-1.25",
+                            height: 22,
+                            width: 22,
+                            icon: FaCalendarXmark
+                        }
+                        div {
+                            {t!("overdue")._upper_first()}
+                        }
+                    }
+                    TaskList {
+                        tasks: overdue_tasks,
+                        class: "pb-3"
+                    }
+                }
+            }
+            div {
+                class: "flex flex-col gap-4",
+                div {
+                    class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                    Icon {
+                        class: "mx-1.25",
+                        height: 22,
+                        width: 22,
+                        icon: FaCalendarCheck
+                    }
+                    div {
+                        {
+                            let format = t!("date-weekday-format");
+                            let today_date = today_date.format_localized(
+                                format.as_str(),
+                                LocaleFromLanguageIdentifier::from(
+                                    &i18n().language()
+                                ).into()
+                            ).to_string();
+                            format!(
+                                "{} – {}",
+                                t!("today")._upper_first(),
+                                if t!("weekday-lowercase-first").parse().unwrap() {
+                                    today_date._lower_first()
+                                } else {
+                                    today_date
+                                }
+                            )
+                        }
+                    }
+                }
+                TaskList {
+                    tasks: today_tasks
+                }
+            }
+        }
+    }
+}
--- a/src/components/create_button.rs
+++ b/src/components/create_button.rs
@@ -0,0 +1,31 @@
+use crate::components::project_form::PROJECT_BEING_EDITED;
+use crate::components::{button_primary::ButtonPrimary, task_form::TASK_BEING_EDITED};
+use crate::route::Route;
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, icons::fa_solid_icons::FaGavel};
+
+#[component]
+pub(crate) fn CreateButton() -> Element {
+    let navigator = use_navigator();
+    let current_route = use_route();
+    rsx! {
+        ButtonPrimary {
+            class: "pointer-events-auto m-4 self-end *:rounded-full! *:p-4",
+            onclick: move |_| {
+                *TASK_BEING_EDITED.write() = None;
+                *PROJECT_BEING_EDITED.write() = None;
+                navigator.push(
+                    match current_route {
+                        Route::ProjectsPage => Route::ProjectFormPage,
+                        _ => Route::TaskFormPage,
+                    }
+                );
+            },
+            Icon {
+                icon: FaGavel,
+                height: 24,
+                width: 24
+            }
+        }
+    }
+}
--- a/src/components/error_boundary_message.rs
+++ b/src/components/error_boundary_message.rs
@@ -0,0 +1,32 @@
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::FaTriangleExclamation;
+
+#[component]
+pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option<String>) -> Element {
+    rsx! {
+        ErrorBoundary {
+            handle_error: |_| {
+                rsx! {
+                    div {
+                        class: "grow flex flex-col justify-center items-center",
+                        div {
+                            Icon {
+                                class: "text-gray-500",
+                                icon: FaTriangleExclamation,
+                                height: 32,
+                                width: 32
+                            }
+                        }
+                    }
+                }
+            },
+            div {
+                class,
+                {children}
+            }
+        }
+    }
+}
--- a/src/components/form_open_button.rs
+++ b/src/components/form_open_button.rs
@@ -1,25 +0,0 @@
-use crate::models::project::Project;
-use crate::models::task::Task;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn FormOpenButton(opened: Signal<bool>) -> Element {
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
-
-    rsx! {
-        button {
-            class: "pointer-events-auto m-4 py-3 px-5 self-end text-center bg-zinc-300/50 rounded-xl border-t-zinc-200 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] text-2xl text-zinc-200",
-            onclick: move |_| {
-                if opened() {
-                    project_being_edited.set(None);
-                    task_being_edited.set(None);
-                }
-                opened.set(!opened());
-            },
-            i {
-                class: format!("min-w-6 fa-solid {}", if opened() { "fa-xmark" } else { "fa-plus" }),
-            }
-        }
-    }
-}
--- a/src/components/home.rs
+++ b/src/components/home.rs
@@ -1,8 +0,0 @@
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn Home() -> Element {
-    rsx! {}
-}
--- a/src/components/input.rs
+++ b/src/components/input.rs
@@ -0,0 +1,47 @@
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn Input(
+    class: Option<String>,
+    name: String,
+    r#type: String,
+    id: Option<String>,
+    #[props(extends = GlobalAttributes, extends = input)] attributes: Vec<Attribute>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/5271 gets resolved.
+    autofocus: Option<bool>,
+    // TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
+    oninput: Option<Callback<Event<FormData>>>,
+    onchange: Option<Callback<Event<FormData>>>,
+) -> Element {
+    rsx! {
+        input {
+            class: format!(
+                "pt-3 pb-2.25 {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
+                match r#type.as_str() {
+                    "date" => "ps-3.25 pe-3",
+                    _ => "px-4"
+                },
+                match r#type.as_str() {
+                    "text" | "number" => "",
+                    _ => "enabled:cursor-pointer"
+                },
+                class.unwrap_or("".to_owned())
+            ),
+            name: name.clone(),
+            r#type,
+            id: id.unwrap_or(format!("input_{}", name)),
+            autofocus,
+            oninput: move |event| {
+                if let Some(oninput) = oninput {
+                    oninput.call(event);
+                }
+            },
+            onchange: move |event| {
+                if let Some(onchange) = oninput {
+                    onchange.call(event);
+                }
+            },
+            ..attributes
+        }
+    }
+}
--- a/src/components/input_label.rs
+++ b/src/components/input_label.rs
@@ -0,0 +1,21 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+#[component]
+pub(crate) fn InputLabel<I: IconShape + Clone + PartialEq + 'static>(
+    icon: I,
+    r#for: Option<String>,
+) -> Element {
+    rsx! {
+        label {
+            r#for,
+            class: "mt-0.5 min-w-7 flex flex-row justify-center items-center",
+            Icon {
+                class: "text-gray-600",
+                icon,
+                height: 16,
+                width: 16
+            }
+        }
+    }
+}
--- a/src/components/layout.rs
+++ b/src/components/layout.rs
@@ -1,33 +0,0 @@
-use crate::components::bottom_panel::BottomPanel;
-use crate::components::form_open_button::FormOpenButton;
-use crate::components::sticky_bottom::StickyBottom;
-use crate::models::project::Project;
-use crate::models::task::Task;
-use crate::route::Route;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn Layout() -> Element {
-    let mut display_form = use_signal(|| false);
-    let project_being_edited =
-        use_context_provider::<Signal<Option<Project>>>(|| Signal::new(None));
-    let task_being_edited = use_context_provider::<Signal<Option<Task>>>(|| Signal::new(None));
-
-    use_effect(move || {
-        display_form.set(project_being_edited().is_some() || task_being_edited().is_some());
-    });
-
-    rsx! {
-        Outlet::<Route> {}
-        StickyBottom {
-            FormOpenButton {
-                opened: display_form,
-            }
-            BottomPanel {
-                display_form: display_form,
-            }
-        }
-    }
-}
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,14 +1,21 @@
 pub(crate) mod app;
 pub(crate) mod bottom_panel;
+pub(crate) mod button_primary;
+pub(crate) mod button_secondary;
+pub(crate) mod category_calendar_task_list;
 pub(crate) mod category_input;
-pub(crate) mod form_open_button;
-pub(crate) mod home;
-pub(crate) mod layout;
+pub(crate) mod category_today_task_list;
+pub(crate) mod create_button;
+pub(crate) mod error_boundary_message;
+pub(crate) mod input;
+pub(crate) mod input_label;
 pub(crate) mod navigation;
 pub(crate) mod navigation_item;
-pub(crate) mod pages;
 pub(crate) mod project_form;
-pub(crate) mod reoccurrence_input;
+pub(crate) mod project_list;
+pub(crate) mod project_select;
+pub(crate) mod reoccurrence_interval_input;
+pub(crate) mod select_button;
 pub(crate) mod sticky_bottom;
 pub(crate) mod subtasks_form;
 pub(crate) mod task_form;
--- a/src/components/navigation.rs
+++ b/src/components/navigation.rs
@@ -1,78 +1,72 @@
 use crate::components::navigation_item::NavigationItem;
 use crate::route::Route;
 use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaBars, FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost,
+    FaTrashCan, FaVolcano,
+};

 #[component]
-pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
+pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
    rsx! {
        div {
            class: "grid grid-cols-5 justify-stretch",
            button {
                class: format!(
-                    "py-4 text-center text-2xl {}",
-                    if expanded() { "text-zinc-200" }
-                    else { "text-zinc-500" }
+                    "py-2 flex flex-row justify-center items-center cursor-pointer",
                ),
-                onclick: move |_| expanded.set(!expanded()),
-                i {
-                    class: "fa-solid fa-bars"
+                onclick: move |_| is_expanded.set(!is_expanded()),
+                div {
+                    class: format!("pt-2.5 px-4 {} transition-all duration-150",
+                        if is_expanded() { "pb-2 mt-1 bg-gray-900 text-gray-400 rounded-xl drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-950)]" }
+                        else { "pb-3 bg-gray-800 rounded-xl drop-shadow-[0_0_0_var(--color-gray-950)] text-gray-600" }
+                    ),
+                    Icon {
+                        icon: FaBars,
+                        height: 24,
+                        width: 24
+                    }
                }
            },
            NavigationItem {
                route: Route::CategoryNextStepsPage,
-                i {
-                    class: "fa-solid fa-forward"
-                }
+                icon: FaSignsPost
            },
            NavigationItem {
                route: Route::CategoryCalendarPage,
-                i {
-                    class: "fa-solid fa-calendar-days"
-                }
+                icon: FaCalendarDays
            },
            NavigationItem {
                route: Route::CategoryTodayPage,
-                i {
-                    class: "fa-solid fa-calendar-day"
-                }
+                icon: FaCalendarDay
            },
            NavigationItem {
                route: Route::CategoryInboxPage,
-                i {
-                    class: "fa-solid fa-inbox"
-                }
+                icon: FaInbox
            },
-            {if expanded() {
+            {if is_expanded() {
                rsx! {
                    NavigationItem {
                        route: Route::ProjectsPage,
-                        i {
-                            class: "fa-solid fa-list"
-                        }
+                        icon: FaList
                    },
                    NavigationItem {
                        route: Route::CategoryTrashPage,
-                        i {
-                            class: "fa-solid fa-trash-can"
-                        }
+                        icon: FaTrashCan
                    },
                    NavigationItem {
                        route: Route::CategoryDonePage,
-                        i {
-                            class: "fa-solid fa-check"
-                        }
+                        icon: FaVolcano
                    },
                    NavigationItem {
-                        route: Route::CategoryLongTermPage,
-                        i {
-                            class: "fa-solid fa-water"
-                        }
+                        route: Route::CategorySomedayMaybePage,
+                        icon: FaLightbulb
                    },
                    NavigationItem {
                        route: Route::CategoryWaitingForPage,
-                        i {
-                            class: "fa-solid fa-hourglass-half"
-                        }
+                        icon: FaHourglassHalf
                    }
                }
            } else { VNode::empty() }}
--- a/src/components/navigation_item.rs
+++ b/src/components/navigation_item.rs
@@ -1,19 +1,31 @@
 use crate::route::Route;
 use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};

 #[component]
-pub(crate) fn NavigationItem(route: Route, children: Element) -> Element {
+pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
+    route: Route,
+    icon: I,
+) -> Element {
    let current_route = use_route::<Route>();

    rsx! {
        Link {
            to: route.clone(),
            class: format!(
-                "py-4 text-center text-2xl {}",
-                if current_route == route { "text-zinc-200" }
-                else { "text-zinc-500" }
+                "py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
            ),
-            children
+            div {
+                class: format!("pt-2.5 px-4 {} transition-all duration-150",
+                    if current_route == route { "pb-2 mt-1 bg-gray-900 text-gray-400 rounded-xl drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-950)]" }
+                    else { "pb-3 bg-gray-800 rounded-xl drop-shadow-[0_0_0_var(--color-gray-950)] text-gray-600" }
+                ),
+                Icon {
+                    icon,
+                    height: 24,
+                    width: 24
+                }
+            }
        }
    }
 }
--- a/src/components/pages/category_calendar_page.rs
+++ b/src/components/pages/category_calendar_page.rs
@@ -1,84 +0,0 @@
-use crate::components::task_list::TaskList;
-use crate::internationalization::LocaleFromLanguageIdentifier;
-use crate::models::category::Category;
-use crate::models::task::TaskWithSubtasks;
-use crate::query::tasks::use_tasks_with_subtasks_in_category_query;
-use crate::query::QueryValue;
-use chrono::{Datelike, Local};
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-use dioxus_i18n::prelude::i18n;
-use dioxus_i18n::t;
-use dioxus_query::prelude::QueryResult;
-
-const CALENDAR_LENGTH_DAYS: usize = 366 * 3;
-
-#[component]
-pub(crate) fn CategoryCalendarPage() -> Element {
-    let tasks = use_tasks_with_subtasks_in_category_query(Category::Calendar {
-        date: Local::now().date_naive(),
-        reoccurrence: None,
-        time: None,
-    });
-    let tasks_query_result = tasks.result();
-
-    rsx! {
-        match tasks_query_result.value() {
-            QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
-            | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => {
-                let today_date = Local::now().date_naive();
-
-                rsx! {
-                    div {
-                        class: "pt-4 flex flex-col gap-8",
-                        for date_current in today_date.iter_days().take(CALENDAR_LENGTH_DAYS) {
-                            div {
-                                class: "flex flex-col gap-4",
-                                div {
-                                    class: "px-8 flex flex-row items-center gap-2 font-bold",
-                                    div {
-                                        class: "pt-1",
-                                        {
-                                            date_current.format_localized(t!(
-                                                    if date_current.year() == Local::now().year() {
-                                                        "date-weekday-format"
-                                                    } else {
-                                                        "date-weekday-year-format"
-                                                    }
-                                                ).as_str(),
-                                                LocaleFromLanguageIdentifier::from(
-                                                    &i18n().language()
-                                                ).into()
-                                            )
-                                            .to_string()
-                                        }
-                                    }
-                                }
-                                TaskList {
-                                    tasks: tasks.iter().filter(|task| {
-                                        if let Category::Calendar { date, .. }
-                                            = task.task().category() {
-                                            *date == date_current
-                                        } else {
-                                            panic!("Unexpected category.");
-                                        }
-                                    }).cloned().collect::<Vec<TaskWithSubtasks>>()
-                                }
-                            }
-                        }
-                    }
-                }
-            },
-            QueryResult::Loading(None) => rsx! {
-                // TODO: Add a loading indicator.
-            },
-            QueryResult::Err(errors) => rsx! {
-                div {
-                    "Errors occurred: {errors:?}"
-                }
-            },
-            value => panic!("Unexpected query result: {value:?}")
-        }
-    }
-}
--- a/src/components/pages/category_done_page.rs
+++ b/src/components/pages/category_done_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategoryDonePage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::Done,
-        }
-    }
-}
--- a/src/components/pages/category_inbox_page.rs
+++ b/src/components/pages/category_inbox_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategoryInboxPage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::Inbox,
-        }
-    }
-}
--- a/src/components/pages/category_long_term_page.rs
+++ b/src/components/pages/category_long_term_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategoryLongTermPage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::LongTerm,
-        }
-    }
-}
--- a/src/components/pages/category_next_steps_page.rs
+++ b/src/components/pages/category_next_steps_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategoryNextStepsPage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::NextSteps,
-        }
-    }
-}
--- a/src/components/pages/category_page.rs
+++ b/src/components/pages/category_page.rs
@@ -1,33 +0,0 @@
-use crate::components::task_list::TaskList;
-use crate::models::category::Category;
-use crate::query::tasks::use_tasks_with_subtasks_in_category_query;
-use crate::query::QueryValue;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-use dioxus_query::prelude::QueryResult;
-
-#[component]
-pub(crate) fn CategoryPage(category: Category) -> Element {
-    let tasks_query = use_tasks_with_subtasks_in_category_query(category);
-    let tasks_query_result = tasks_query.result();
-
-    match tasks_query_result.value() {
-        QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
-        | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => rsx! {
-            TaskList {
-                tasks: tasks.clone(),
-                class: "pb-36"
-            }
-        },
-        QueryResult::Loading(None) => rsx! {
-            // TODO: Add a loading indicator.
-        },
-        QueryResult::Err(errors) => rsx! {
-            div {
-                "Errors occurred: {errors:?}"
-            }
-        },
-        value => panic!("Unexpected query result: {value:?}"),
-    }
-}
--- a/src/components/pages/category_someday_maybe_page.rs
+++ b/src/components/pages/category_someday_maybe_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategorySomedayMaybePage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::SomedayMaybe,
-        }
-    }
-}
--- a/src/components/pages/category_today_page.rs
+++ b/src/components/pages/category_today_page.rs
@@ -1,166 +0,0 @@
-use crate::components::task_list::TaskList;
-use crate::components::task_list_item::TaskListItem;
-use crate::internationalization::LocaleFromLanguageIdentifier;
-use crate::models::category::Category;
-use crate::models::task::TaskWithSubtasks;
-use crate::query::tasks::use_tasks_with_subtasks_in_category_query;
-use crate::query::QueryValue;
-use chrono::Local;
-use dioxus::prelude::*;
-use dioxus_i18n::t;
-use dioxus_i18n::use_i18n::i18n;
-use dioxus_query::prelude::QueryResult;
-use voca_rs::Voca;
-
-#[component]
-pub(crate) fn CategoryTodayPage() -> Element {
-    let today_date = Local::now().date_naive();
-
-    let calendar_tasks_query = use_tasks_with_subtasks_in_category_query(Category::Calendar {
-        date: today_date,
-        reoccurrence: None,
-        time: None,
-    });
-    let calendar_tasks_query_result = calendar_tasks_query.result();
-
-    let long_term_tasks_query = use_tasks_with_subtasks_in_category_query(Category::LongTerm);
-    let long_term_tasks_query_result = long_term_tasks_query.result();
-
-    rsx! {
-        div {
-            class: "pt-4 flex flex-col gap-8",
-            match long_term_tasks_query_result.value() {
-                QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
-                | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => {
-                    let mut tasks = tasks.clone();
-                    tasks.sort();
-                    rsx! {
-                        div {
-                            class: "flex flex-col gap-4",
-                            div {
-                                class: "px-8 flex flex-row items-center gap-2 font-bold",
-                                i {
-                                    class: "fa-solid fa-water text-xl w-6 text-center"
-                                }
-                                div {
-                                    class: "mt-1",
-                                    {t!("long-term")._upper_first()}
-                                }
-                            }
-                            div {
-                                for task in tasks {
-                                    div {
-                                        key: "{task.task().id()}",
-                                        class: format!(
-                                            "px-8 pt-5 {} flex flex-row gap-4",
-                                            if task.task().deadline().is_some() {
-                                                "pb-0.5"
-                                            } else {
-                                                "pb-5"
-                                            }
-                                        ),
-                                        TaskListItem {
-                                            task: task.clone()
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                },
-                QueryResult::Loading(None) => rsx! {
-                    // TODO: Add a loading indicator.
-                },
-                QueryResult::Err(errors) => rsx! {
-                    div {
-                        "Errors occurred: {errors:?}"
-                    }
-                },
-                value => panic!("Unexpected query result: {value:?}")
-            }
-            match calendar_tasks_query_result.value() {
-                QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
-                | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => {
-                    let today_tasks = tasks.iter().filter(|task| {
-                        if let Category::Calendar { date, .. } = task.task().category() {
-                            *date == today_date
-                        } else {
-                            panic!("Unexpected category.");
-                        }
-                    }).cloned().collect::<Vec<TaskWithSubtasks>>();
-                    let overdue_tasks = tasks.iter().filter(|task| {
-                        if let Category::Calendar { date, .. } = task.task().category() {
-                            *date < today_date
-                        } else {
-                            panic!("Unexpected category.");
-                        }
-                    }).cloned().collect::<Vec<TaskWithSubtasks>>();
-
-                    rsx! {
-                        if !overdue_tasks.is_empty() {
-                            div {
-                                class: "flex flex-col gap-4",
-                                div {
-                                    class: "px-8 flex flex-row items-center gap-2 font-bold",
-                                    i {
-                                        class: "fa-solid fa-calendar-xmark text-xl w-6 text-center"
-                                    }
-                                    div {
-                                        class: "mt-1",
-                                        {t!("overdue")._upper_first()}
-                                    }
-                                }
-                                TaskList {
-                                    tasks: overdue_tasks,
-                                    class: "pb-3"
-                                }
-                            }
-                        }
-                        div {
-                            class: "flex flex-col gap-4",
-                            div {
-                                class: "px-8 flex flex-row items-center gap-2 font-bold",
-                                i {
-                                    class: "fa-solid fa-calendar-check text-xl w-6 text-center"
-                                }
-                                div {
-                                    class: "mt-1",
-                                    {
-                                        let format = t!("date-weekday-format");
-                                        let today_date = today_date.format_localized(
-                                            format.as_str(),
-                                            LocaleFromLanguageIdentifier::from(
-                                                &i18n().language()
-                                            ).into()
-                                        ).to_string();
-                                        format!(
-                                            "{} – {}",
-                                            t!("today")._upper_first(),
-                                            if t!("weekday-lowercase-first").parse().unwrap() {
-                                                today_date._lower_first()
-                                            } else {
-                                                today_date
-                                            }
-                                        )
-                                    }
-                                }
-                            }
-                            TaskList {
-                                tasks: today_tasks
-                            }
-                        }
-                    }
-                },
-                QueryResult::Loading(None) => rsx! {
-                    // TODO: Add a loading indicator.
-                },
-                QueryResult::Err(errors) => rsx! {
-                    div {
-                        "Errors occurred: {errors:?}"
-                    }
-                },
-                value => panic!("Unexpected query result: {value:?}")
-            }
-        }
-    }
-}
--- a/src/components/pages/category_trash_page.rs
+++ b/src/components/pages/category_trash_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategoryTrashPage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::Trash,
-        }
-    }
-}
--- a/src/components/pages/category_waiting_for_page.rs
+++ b/src/components/pages/category_waiting_for_page.rs
@@ -1,14 +0,0 @@
-use crate::components::pages::category_page::CategoryPage;
-use crate::models::category::Category;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn CategoryWaitingForPage() -> Element {
-    rsx! {
-        CategoryPage {
-            category: Category::WaitingFor(String::new()),
-        }
-    }
-}
--- a/src/components/pages/projects_page.rs
+++ b/src/components/pages/projects_page.rs
@@ -1,48 +0,0 @@
-use crate::models::project::Project;
-use crate::query::projects::use_projects_query;
-use crate::query::QueryValue;
-use dioxus::prelude::*;
-use dioxus_query::prelude::QueryResult;
-
-#[component]
-pub(crate) fn ProjectsPage() -> Element {
-    let projects_query = use_projects_query();
-    let mut project_being_edited = use_context::<Signal<Option<Project>>>();
-
-    rsx! {
-        match projects_query.result().value() {
-            QueryResult::Ok(QueryValue::Projects(projects))
-            | QueryResult::Loading(Some(QueryValue::Projects(projects))) => {
-                let mut projects = projects.clone();
-                projects.sort();
-                rsx! {
-                    div {
-                        class: "flex flex-col",
-                        for project in projects {
-                            div {
-                                key: "{project.id()}",
-                                class: format!(
-                                    "px-8 py-4 select-none {}",
-                                    if project_being_edited().is_some_and(|p| p.id() == project.id()) {
-                                        "bg-zinc-700"
-                                    } else { "" }
-                                ),
-                                onclick: move |_| project_being_edited.set(Some(project.clone())),
-                                {project.title()}
-                            }
-                        }
-                    }
-                }
-            },
-            QueryResult::Loading(None) => rsx! {
-                // TODO: Add a loading indicator.
-            },
-            QueryResult::Err(errors) => rsx! {
-                div {
-                    "Errors occurred: {errors:?}"
-                }
-            },
-            value => panic!("Unexpected query result: {value:?}")
-        }
-    }
-}
--- a/src/components/project_form.rs
+++ b/src/components/project_form.rs
@@ -1,80 +1,113 @@
-use crate::models::project::{NewProject, Project};
-use crate::query::{QueryErrors, QueryKey, QueryValue};
+use crate::components::button_primary::ButtonPrimary;
+use crate::components::button_secondary::ButtonSecondary;
+use crate::components::input::Input;
+use crate::components::input_label::InputLabel;
+use crate::models::project::Project;
 use crate::server::projects::{create_project, delete_project, edit_project};
 use dioxus::core_macro::{component, rsx};
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
-use dioxus_query::prelude::use_query_client;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::{FaFeatherPointed, FaStamp, FaTrashCan, FaXmark};
+
+pub(crate) static PROJECT_BEING_EDITED: GlobalSignal<Option<Project>> = Signal::global(|| None);

 #[component]
-pub(crate) fn ProjectForm(
-    project: Option<Project>,
-    on_successful_submit: EventHandler<()>,
-) -> Element {
-    let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
+pub(crate) fn ProjectForm() -> Element {
+    let navigator = use_navigator();
+    let project = PROJECT_BEING_EDITED();
    let project_for_submit = project.clone();
-
    rsx! {
        form {
+            class: "px-4 flex flex-col gap-4",
            onsubmit: move |event| {
+                event.prevent_default();
                let project = project_for_submit.clone();
                async move {
-                    let new_project = NewProject::new(
-                        event.values().get("title").unwrap().as_value()
-                    );
-                    if let Some(project) = project {
-                        let _ = edit_project(project.id(), new_project).await;
+                    let new_project = event.parsed_values().unwrap();
+                    let result = if let Some(project) = project {
+                        edit_project(project.id, new_project).await
                    } else {
-                        let _ = create_project(new_project).await;
+                        create_project(new_project).await
+                    };
+                    if result.is_ok() {
+                        navigator.go_back();
                    }
-                    query_client.invalidate_queries(&[QueryKey::Projects]);
-                    on_successful_submit.call(());
                }
            },
-            class: "p-4 flex flex-col gap-4",
+            id: "form_project",
            div {
                class: "flex flex-row items-center gap-3",
-                label {
-                    r#for: "input_title",
-                    class: "min-w-6 text-center",
-                    i {
-                        class: "fa-solid fa-pen-clip text-zinc-400/50"
+                InputLabel {
+                    icon: FaFeatherPointed,
+                    r#for: "input_title"
                }
-                }
-                input {
+                Input {
+                    class: "grow",
                    name: "title",
                    required: true,
-                    initial_value: project.as_ref().map(|project| project.title().to_owned()),
                    r#type: "text",
-                    class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
-                    id: "input_title"
+                    initial_value: project.as_ref().map(|project| project.title.to_owned()),
+                }
            }
        }
        div {
-                class: "flex flex-row justify-between mt-auto",
-                button {
+            class: "px-4 grid grid-cols-3 gap-3 mt-auto",
+            ButtonSecondary {
                r#type: "button",
-                    class: "py-2 px-4 bg-zinc-300/50 rounded-lg",
-                    onclick: move |_| {
+                class: "grow",
+                onclick: {
+                    let project = project.clone();
+                    move |_| {
                        let project = project.clone();
                        async move {
                            if let Some(project) = project {
-                                let _ = delete_project(project.id()).await;
-                                query_client.invalidate_queries(&[QueryKey::Projects]);
+                                let result = delete_project(project.id).await;
+                                if result.is_ok() {
+                                    /* TODO: Might not work on mobile due to
+                                    https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
+                                    */
+                                    navigator.go_back();
+                                }
+                            } else {
+                                navigator.go_back();
+                            }
                        }
-                            on_successful_submit.call(());
                    }
                },
-                    i {
-                        class: "fa-solid fa-trash-can"
+                Icon {
+                    icon: FaTrashCan,
+                    height: 16,
+                    width: 16
                }
            }
-                button {
+            if project.is_some() {
+                div {
+                    class: "grow flex flex-col items-stretch",
+                    GoBackButton {
+                        ButtonSecondary {
+                            /* TODO: Replace w-full` with proper flexbox styling once
+                            https://github.com/DioxusLabs/dioxus/issues/5269 is solved. */
+                            class: "w-full",
+                            r#type: "button",
+                            Icon {
+                                icon: FaXmark,
+                                height: 16,
+                                width: 16
+                            }
+                        }
+                    }
+                }
+            } else {
+                div {}
+            }
+            ButtonPrimary {
+                form: "form_project",
                r#type: "submit",
-                    class: "py-2 px-4 bg-zinc-300/50 rounded-lg",
-                    i {
-                        class: "fa-solid fa-floppy-disk"
-                    }
+                Icon {
+                    icon: FaStamp,
+                    height: 16,
+                    width: 16
                }
            }
        }
--- a/src/components/project_list.rs
+++ b/src/components/project_list.rs
@@ -0,0 +1,25 @@
+use crate::route::Route;
+use crate::{components::project_form::PROJECT_BEING_EDITED, hooks::use_projects};
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn ProjectList() -> Element {
+    let navigator = use_navigator();
+    let projects = use_projects()?;
+    rsx! {
+        div {
+            class: "flex flex-col",
+            for project in projects {
+                div {
+                    class: "px-7 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
+                    key: "{project.id}",
+                    onclick: move |_| {
+                        *PROJECT_BEING_EDITED.write() = Some(project.clone());
+                        navigator.push(Route::ProjectFormPage);
+                    },
+                    {project.title.clone()}
+                }
+            }
+        }
+    }
+}
--- a/src/components/project_select.rs
+++ b/src/components/project_select.rs
@@ -0,0 +1,30 @@
+use crate::hooks::use_projects;
+use dioxus::core_macro::{component, rsx};
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_i18n::t;
+
+#[component]
+pub(crate) fn ProjectSelect(initial_selected_id: Option<i32>) -> Element {
+    let projects = use_projects()?;
+    rsx! {
+        select {
+            name: "project_id",
+            class: "px-4 pt-3 pb-2.25 bg-gray-800-muted enabled:hover:bg-gray-800 enabled:active:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
+            id: "input_project_id",
+            option {
+                value: 0,
+                {t!("none")}
+            },
+            for project in projects {
+                option {
+                    value: project.id.to_string(),
+                    initial_selected: initial_selected_id.is_some_and(
+                        |id| id == project.id
+                    ),
+                    {project.title}
+                }
+            }
+        }
+    }
+}
--- a/src/components/reoccurrence_input.rs
+++ b/src/components/reoccurrence_input.rs
@@ -1,76 +0,0 @@
-use crate::models::category::ReoccurrenceInterval;
-use dioxus::core_macro::rsx;
-use dioxus::dioxus_core::Element;
-use dioxus::prelude::*;
-
-#[component]
-pub(crate) fn ReoccurrenceIntervalInput(
-    reoccurrence_interval: Signal<Option<ReoccurrenceInterval>>,
-    class_buttons: Option<&'static str>,
-) -> Element {
-    rsx! {
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 rounded-lg {} {}",
-                class_buttons.unwrap_or(""),
-                if reoccurrence_interval().is_none() { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(None);
-            },
-            i {
-                class: "fa-solid fa-ban"
-            }
-        },
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 rounded-lg {} {}",
-                class_buttons.unwrap_or(""),
-                if let Some(ReoccurrenceInterval::Day) = reoccurrence_interval()
-                { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
-            },
-            i {
-                class: "fa-solid fa-sun"
-            }
-        },
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 rounded-lg {} {}",
-                class_buttons.unwrap_or(""),
-                if let Some(ReoccurrenceInterval::Month) = reoccurrence_interval()
-                { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(Some(ReoccurrenceInterval::Month))
-            },
-            i {
-                class: "fa-solid fa-moon"
-            }
-        },
-        button {
-            r#type: "button",
-            class: format!(
-                "py-2 rounded-lg {} {}",
-                class_buttons.unwrap_or(""),
-                if let Some(ReoccurrenceInterval::Year) = reoccurrence_interval()
-                { "bg-zinc-500/50" }
-                else { "bg-zinc-800/50" }
-            ),
-            onclick: move |_| {
-                reoccurrence_interval.set(Some(ReoccurrenceInterval::Year))
-            },
-            i {
-                class: "fa-solid fa-earth-europe"
-            }
-        }
-    }
-}
--- a/src/components/reoccurrence_interval_input.rs
+++ b/src/components/reoccurrence_interval_input.rs
@@ -0,0 +1,44 @@
+use crate::components::select_button::SelectButton;
+use crate::models::category::ReoccurrenceInterval;
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_solid_icons::{FaBan, FaEarthEurope, FaMoon, FaSun};
+
+#[component]
+pub(crate) fn ReoccurrenceIntervalInput(
+    reoccurrence_interval: Signal<Option<ReoccurrenceInterval>>,
+    class_buttons: Option<&'static str>,
+) -> Element {
+    rsx! {
+        // TODO: Abstract into SelectButton. Make it sank into the surface by default, like other inputs (abstract those too haha), and rise it up on selection (rationale: it will influence what is on the surface).
+        SelectButton {
+            icon: FaBan,
+            is_selected: reoccurrence_interval().is_none(),
+            on_select: move |_| {
+                reoccurrence_interval.set(None);
+            }
+        }
+        SelectButton {
+            icon: FaSun,
+            is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Day)),
+            on_select: move |_| {
+                reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
+            }
+        }
+        SelectButton {
+            icon: FaMoon,
+            is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Month)),
+            on_select: move |_| {
+                reoccurrence_interval.set(Some(ReoccurrenceInterval::Month));
+            }
+        }
+        SelectButton {
+            icon: FaEarthEurope,
+            is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Year)),
+            on_select: move |_| {
+                reoccurrence_interval.set(Some(ReoccurrenceInterval::Year));
+            }
+        }
+    }
+}
--- a/src/components/select_button.rs
+++ b/src/components/select_button.rs
@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+#[component]
+pub(crate) fn SelectButton<I: IconShape + Clone + PartialEq + 'static>(
+    icon: I,
+    is_selected: bool,
+    on_select: Callback,
+) -> Element {
+    rsx! {
+        button {
+            r#type: "button",
+            class: format!(
+                "pt-4.5 flex flex-row justify-center items-center {} rounded-xl transition-all duration-150",
+                if is_selected { "pb-3.75 bg-gray-900 drop-shadow-[0_0_0_var(--color-gray-900-muted)]" }
+                else { "pb-2.75 mt-1 bg-gray-800-muted hover:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] text-gray-400 cursor-pointer" }
+            ),
+            onclick: move |_| {
+                on_select.call(());
+            },
+            Icon {
+                icon,
+                height: 16,
+                width: 16
+            }
+        },
+    }
+}
--- a/src/components/subtasks_form.rs
+++ b/src/components/subtasks_form.rs
@@ -1,186 +1,143 @@
+use crate::components::button_secondary::ButtonSecondary;
+use crate::components::input::Input;
+use crate::components::input_label::InputLabel;
+use crate::hooks::use_subtasks_of_task;
 use crate::models::subtask::NewSubtask;
 use crate::models::task::Task;
-use crate::query::subtasks::use_subtasks_of_task_query;
-use crate::query::{QueryErrors, QueryKey, QueryValue};
 use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask};
 use dioxus::core_macro::{component, rsx};
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
-use dioxus_query::prelude::{use_query_client, QueryResult};
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::{FaGavel, FaListCheck, FaTrashCan};

 #[component]
 pub(crate) fn SubtasksForm(task: Task) -> Element {
-    let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
-    let subtasks_query = use_subtasks_of_task_query(task.id());
-
+    let subtasks = use_subtasks_of_task(task.id)?;
    let mut new_title = use_signal(String::new);
-
    rsx! {
+        div {
+            class: "flex flex-col gap-3",
            form {
                class: "flex flex-row items-center gap-3",
                onsubmit: move |event| {
+                    event.prevent_default();
                    let task = task.clone();
                    async move {
-                    let new_subtask = NewSubtask::new(
-                        task.id(),
-                        event.values().get("title").unwrap().as_value(),
-                        false
-                    );
+                        let new_subtask = NewSubtask {
+                            task_id: task.id,
+                            title: event.get("new_title").first().cloned().and_then(|value| match value {
+                                FormValue::Text(value) => Some(value),
+                                FormValue::File(_) => None
+                            }).unwrap(),
+                            is_completed: false
+                        };
                        let _ = create_subtask(new_subtask).await;
-                    query_client.invalidate_queries(&[
-                        QueryKey::SubtasksOfTaskId(task.id()),
-                        QueryKey::TasksWithSubtasksInCategory(task.category().clone()),
-                    ]);
                        new_title.set(String::new());
                    }
                },
-            label {
-                r#for: "input_new_title",
-                class: "min-w-6 text-center",
-                i {
-                    class: "fa-solid fa-list-check text-zinc-400/50"
-                }
+                InputLabel {
+                    icon: FaListCheck,
+                    r#for: "input_new_title"
                }
                div {
-                class: "grow grid grid-cols-6 gap-2",
-                input {
-                    name: "title",
+                    class: "grow flex flex-row items-end gap-3",
+                    Input {
+                        class: "grow",
+                        name: "new_title",
+                        r#type: "text",
                        required: true,
                        value: new_title,
-                    r#type: "text",
-                    class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
-                    id: "input_new_title",
-                    onchange: move |event| new_title.set(event.value())
+                        onchange: move |event: Event<FormData>| new_title.set(event.value())
                    }
-                button {
+                    ButtonSecondary {
                        r#type: "submit",
-                    class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
-                    i {
-                        class: "fa-solid fa-plus"
+                        Icon {
+                            icon: FaGavel,
+                            height: 16,
+                            width: 16
                        }
                    }
                }
            }
-        match subtasks_query.result().value() {
-            QueryResult::Ok(QueryValue::Subtasks(subtasks))
-            | QueryResult::Loading(Some(QueryValue::Subtasks(subtasks))) => {
-                let mut subtasks = subtasks.clone();
-                subtasks.sort();
-                rsx! {
            for subtask in subtasks {
                div {
-                            key: "{subtask.id()}",
+                    key: "{subtask.id}",
                    class: "flex flex-row items-center gap-3",
-                            i {
-                                class: format!(
-                                    "{} min-w-6 text-center text-2xl text-zinc-400/50",
-                                    if subtask.is_completed() {
-                                        "fa solid fa-square-check"
-                                    } else {
-                                        "fa-regular fa-square"
-                                    }
-                                ),
+                    button {
+                        class: "mt-1.5 hover:mt-1 hover:pb-0.5 min-w-7 cursor-pointer transition-all duration-150",
                        onclick: {
                            let subtask = subtask.clone();
-                                    let task = task.clone();
                            move |_| {
                                let subtask = subtask.clone();
-                                        let task = task.clone();
                                async move {
-                                            let new_subtask = NewSubtask::new(
-                                                subtask.task_id(),
-                                                subtask.title().to_owned(),
-                                                !subtask.is_completed()
-                                            );
+                                    let new_subtask = NewSubtask {
+                                        task_id: subtask.task_id,
+                                        title: subtask.title.clone(),
+                                        is_completed: !subtask.is_completed
+                                    };
                                    let _ = edit_subtask(
-                                                subtask.id(),
+                                        subtask.id,
                                        new_subtask
                                    ).await;
-                                            query_client.invalidate_queries(&[
-                                                QueryKey::SubtasksOfTaskId(task.id()),
-                                                QueryKey::TasksWithSubtasksInCategory(
-                                                    task.category().clone()
-                                                ),
-                                            ]);
                                }
                            }
+                        },
+                        div {
+                            class: format!("grow h-7 w-7 mb-[4px] drop-shadow-[0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800)] rounded-full {}",
+                                if subtask.is_completed {"bg-gray-600"} else {"border-3 border-gray-600"}
+                            )
                        }
                    }
                    div {
-                                class: "grow grid grid-cols-6 gap-2",
-                                input {
+                        class: "grow flex flex-row items-end gap-3",
+                        Input {
+                            class: "grow",
+                            name: "title_edit_{subtask.id}",
                            r#type: "text",
-                                    class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
-                                    id: "input_title_{subtask.id()}",
-                                    initial_value: subtask.title(),
+                            initial_value: subtask.title.clone(),
                            onchange: {
                                let subtask = subtask.clone();
-                                        let task = task.clone();
                                move |event: Event<FormData>| {
                                    let subtask = subtask.clone();
-                                            let task = task.clone();
                                    async move {
-                                                let new_subtask = NewSubtask::new(
-                                                    subtask.task_id(),
-                                                    event.value(),
-                                                    subtask.is_completed()
-                                                );
+                                        let new_subtask = NewSubtask {
+                                            task_id: subtask.task_id,
+                                            title: event.value(),
+                                            is_completed: subtask.is_completed
+                                        };
                                        if new_subtask.title.is_empty() {
-                                                    let _ = delete_subtask(subtask.id()).await;
+                                            let _ = delete_subtask(subtask.id).await;
                                        } else {
                                            let _ = edit_subtask(
-                                                        subtask.id(),
+                                                subtask.id,
                                                new_subtask
                                            ).await;
                                        }
-                                                query_client.invalidate_queries(&[
-                                                    QueryKey::SubtasksOfTaskId(task.id()),
-                                                    QueryKey::TasksWithSubtasksInCategory(
-                                                        task.category().clone()
-                                                    ),
-                                                ]);
                                    }
                                }
                            }
                        }
-                                button {
+                        ButtonSecondary {
                            r#type: "button",
-                                    class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
                            onclick: {
                                let subtask = subtask.clone();
-                                        let task = task.clone();
                                move |_| {
                                    let subtask = subtask.clone();
-                                            let task = task.clone();
                                    async move {
-                                                let _ = delete_subtask(subtask.id()).await;
-                                                query_client.invalidate_queries(&[
-                                                    QueryKey::SubtasksOfTaskId(task.id()),
-                                                    QueryKey::TasksWithSubtasksInCategory(
-                                                        task.category().clone()
-                                                    ),
-                                                ]);
+                                        let _ = delete_subtask(subtask.id).await;
                                    }
                                }
                            },
-                                    i {
-                                        class: "fa-solid fa-trash-can"
+                            Icon {
+                                icon: FaTrashCan,
+                                height: 16,
+                                width: 16
                            }
                        }
                    }
                }
            }
        }
-            },
-            QueryResult::Loading(None) => rsx! {
-                // TODO: Add a loading indicator.
-            },
-            QueryResult::Err(errors) => rsx! {
-                div {
-                    "Errors occurred: {errors:?}"
-                }
-            },
-            value => panic!("Unexpected query result: {value:?}")
-        }
    }
 }
--- a/src/components/task_form.rs
+++ b/src/components/task_form.rs
@@ -1,19 +1,26 @@
+use crate::components::button_primary::ButtonPrimary;
+use crate::components::button_secondary::ButtonSecondary;
 use crate::components::category_input::CategoryInput;
-use crate::components::reoccurrence_input::ReoccurrenceIntervalInput;
+use crate::components::input::Input;
+use crate::components::input_label::InputLabel;
+use crate::components::project_select::ProjectSelect;
+use crate::components::reoccurrence_interval_input::ReoccurrenceIntervalInput;
 use crate::components::subtasks_form::SubtasksForm;
 use crate::models::category::{CalendarTime, Category, Reoccurrence};
 use crate::models::task::NewTask;
 use crate::models::task::Task;
-use crate::query::projects::use_projects_query;
-use crate::query::{QueryErrors, QueryKey, QueryValue};
-use crate::route::Route;
 use crate::server::tasks::{create_task, delete_task, edit_task};
 use chrono::Duration;
 use dioxus::core_macro::{component, rsx};
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaBell, FaBomb, FaClock, FaFeatherPointed, FaHourglassEnd, FaList, FaRepeat, FaScroll, FaStamp,
+    FaTrashCan, FaXmark,
+};
 use dioxus_i18n::t;
-use dioxus_query::prelude::{use_query_client, QueryResult};
+use serde::{Deserialize, Serialize};

 const REMINDER_OFFSETS: [Option<Duration>; 17] = [
    None,
@@ -35,27 +42,31 @@ const REMINDER_OFFSETS: [Option<Duration>; 17] = [
    Some(Duration::zero()),
 ];

-#[component]
-pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()>) -> Element {
-    let projects_query = use_projects_query();
+#[derive(Serialize, Deserialize)]
+struct InputData {
+    title: String,
+    deadline: Option<String>,
+    category_waiting_for: Option<String>,
+    category_calendar_date: Option<String>,
+    category_calendar_reoccurrence_length: Option<String>,
+    category_calendar_time: Option<String>,
+    category_calendar_reminder_offset_index: Option<String>,
+    project_id: Option<String>,
+}

-    let route = use_route::<Route>();
+pub(crate) static TASK_BEING_EDITED: GlobalSignal<Option<Task>> = Signal::global(|| None);
+pub(crate) static LATEST_VISITED_CATEGORY: GlobalSignal<Category> =
+    Signal::global(|| Category::Inbox);
+
+#[component]
+pub(crate) fn TaskForm() -> Element {
+    let navigator = use_navigator();
+    let task = TASK_BEING_EDITED();
    let selected_category = use_signal(|| {
        if let Some(task) = &task {
-            task.category().clone()
+            task.category.clone()
        } else {
-            match route {
-                Route::CategorySomedayMaybePage => Category::SomedayMaybe,
-                Route::CategoryWaitingForPage => Category::WaitingFor(String::new()),
-                Route::CategoryNextStepsPage => Category::NextSteps,
-                Route::CategoryCalendarPage | Route::CategoryTodayPage => Category::Calendar {
-                    date: chrono::Local::now().date_naive(),
-                    reoccurrence: None,
-                    time: None,
-                },
-                Route::CategoryLongTermPage => Category::LongTerm,
-                _ => Category::Inbox,
-            }
+            LATEST_VISITED_CATEGORY()
        }
    });
    let category_calendar_reoccurrence_interval = use_signal(|| {
@@ -63,244 +74,194 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
            if let Category::Calendar {
                reoccurrence: Some(reoccurrence),
                ..
-            } = task.category()
+            } = &task.category
            {
-                Some(reoccurrence.interval().clone())
+                Some(reoccurrence.interval.clone())
            } else {
                None
            }
        })
    });
    let mut category_calendar_has_time = use_signal(|| {
-        task.as_ref().is_some_and(|task| {
-            matches!(*task.category(), Category::Calendar { time: Some(_), .. })
-        })
+        task.as_ref()
+            .is_some_and(|task| matches!(task.category, Category::Calendar { time: Some(_), .. }))
    });
    let mut category_calendar_reminder_offset_index = use_signal(|| {
        task.as_ref()
            .and_then(|task| {
                if let Category::Calendar {
                    time: Some(time), ..
-                } = task.category()
+                } = &task.category
                {
                    REMINDER_OFFSETS
                        .iter()
-                        .position(|&reminder_offset| reminder_offset == time.reminder_offset())
+                        .position(|&reminder_offset| reminder_offset == time.reminder_offset)
                } else {
                    None
                }
            })
            .unwrap_or(REMINDER_OFFSETS.len() - 1)
    });
-
-    let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
    let task_for_submit = task.clone();

    rsx! {
        div {
-            class: "p-4 flex flex-col gap-4",
+            class: "grow px-4 flex flex-col gap-6.5",
            form {
-                class: "flex flex-col gap-4",
+                class: "flex flex-col gap-8",
                id: "form_task",
                onsubmit: move |event| {
+                    event.prevent_default();
                    let task = task_for_submit.clone();
                    async move {
-                        let new_task = NewTask::new(
-                            event.values().get("title").unwrap().as_value(),
-                            event.values().get("deadline").unwrap().as_value().parse().ok(),
-                            match &selected_category() {
+                        let input_data = event.parsed_values::<InputData>().unwrap();
+                        let new_task = NewTask {
+                            title: input_data.title,
+                            deadline: input_data.deadline
+                                .and_then(|deadline| deadline.parse().ok()),
+                            category: match &selected_category() {
                                Category::WaitingFor(_) => Category::WaitingFor(
-                                    event.values().get("category_waiting_for").unwrap()
-                                    .as_value()
+                                    input_data.category_waiting_for.unwrap()
                                ),
                                Category::Calendar { .. } => Category::Calendar {
-                                    date: event.values().get("category_calendar_date").unwrap()
-                                    .as_value().parse().unwrap(),
+                                    date: input_data.category_calendar_date.clone().unwrap().parse()
+                                        .unwrap(),
                                    reoccurrence: category_calendar_reoccurrence_interval().map(
-                                        |reoccurrence_interval| Reoccurrence::new(
-                                            event.values().get("category_calendar_date").unwrap()
-                                            .as_value().parse().unwrap(),
-                                            reoccurrence_interval,
-                                            event.values()
-                                            .get("category_calendar_reoccurrence_length")
-                                            .unwrap().as_value().parse().unwrap()
-                                        )
+                                        |reoccurrence_interval| Reoccurrence {
+                                            start_date: input_data.category_calendar_date.unwrap()
+                                                .parse().unwrap(),
+                                            interval: reoccurrence_interval,
+                                            length: input_data.category_calendar_reoccurrence_length
+                                                .unwrap().parse().unwrap()
+                                        }
                                    ),
-                                    time: event.values().get("category_calendar_time").unwrap()
-                                    .as_value().parse().ok().map(|time|
-                                        CalendarTime::new(
+                                    time: input_data.category_calendar_time.unwrap().parse().ok()
+                                        .map(|time| CalendarTime {
                                            time,
-                                            REMINDER_OFFSETS[
-                                                event.values()
-                                                .get("category_calendar_reminder_offset_index")
-                                                .unwrap().as_value().parse::<usize>().unwrap()
+                                            reminder_offset: REMINDER_OFFSETS[
+                                                input_data.category_calendar_reminder_offset_index
+                                                    .unwrap().parse::<usize>().unwrap()
                                            ]
-                                        )
+                                        }
                                    )
                                },
                                category => category.clone()
                            },
-                            event.values().get("project_id").unwrap()
-                            .as_value().parse::<i32>().ok().filter(|&id| id > 0),
-                        );
-                        if let Some(task) = task {
-                            let _ = edit_task(task.id(), new_task).await;
+                            project_id: input_data.project_id
+                                .and_then(|deadline| deadline.parse().ok()).filter(|&id| id > 0),
+                        };
+                        let result = if let Some(task) = task {
+                            edit_task(task.id, new_task).await
                        } else {
-                            let _ = create_task(new_task).await;
+                            create_task(new_task).await
+                        };
+                        if result.is_ok() {
+                            navigator.go_back();
                        }
-                        query_client.invalidate_queries(&[
-                            QueryKey::Tasks,
-                            QueryKey::TasksInCategory(selected_category()),
-                            QueryKey::TasksWithSubtasksInCategory(selected_category()),
-                        ]);
-                        on_successful_submit.call(());
                    }
                },
                div {
                    class: "flex flex-row items-center gap-3",
-                    label {
+                    InputLabel {
                        r#for: "input_title",
-                        class: "min-w-6 text-center",
-                        i {
-                            class: "fa-solid fa-pen-clip text-zinc-400/50"
+                        icon: FaFeatherPointed
                    },
-                    },
-                    input {
+                    Input {
+                        class: "grow",
                        name: "title",
                        required: true,
-                        initial_value: task.as_ref().map(|task| task.title().to_owned()),
+                        initial_value: task.as_ref().map(|task| task.title.clone()),
                        r#type: "text",
-                        class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
-                        id: "input_title"
-                    },
+                        autofocus: true
+                    }
                },
                div {
                    class: "flex flex-row items-center gap-3",
-                    label {
-                        r#for: "input_project",
-                        class: "min-w-6 text-center",
-                        i {
-                            class: "fa-solid fa-list text-zinc-400/50"
-                        }
+                    InputLabel {
+                        r#for: "input_project_id",
+                        icon: FaList
                    },
+                    SuspenseBoundary {
+                        fallback: |_| {
+                            rsx ! {
                                select {
-                        name: "project_id",
-                        class: "px-3.5 py-2.5 bg-zinc-800/50 rounded-lg grow",
-                        id: "input_project",
+                                    class: "px-4 pt-3 pb-2.25 bg-gray-800-muted drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
                                    option {
-                            value: 0,
-                            {t!("none")}
-                        },
-                        match projects_query.result().value() {
-                            QueryResult::Ok(QueryValue::Projects(projects))
-                            | QueryResult::Loading(Some(QueryValue::Projects(projects))) => {
-                                let mut projects = projects.clone();
-                                projects.sort();
-                                rsx! {
-                                    for project in projects {
-                                        option {
-                                            value: project.id().to_string(),
-                                            initial_selected: task.as_ref().is_some_and(
-                                                |task| task.project_id() == Some(project.id())
-                                            ),
-                                            {project.title()}
+                                        value: 0
                                    }
                                }
                            }
                        },
-                            QueryResult::Loading(None) => rsx! {
-                                // TODO: Add a loading indicator.
-                            },
-                            QueryResult::Err(errors) => rsx! {
-                                div {
-                                    "Errors occurred: {errors:?}"
+                        ProjectSelect {
+                            initial_selected_id: task.clone().and_then(|task| task.project_id)
                        }
-                            },
-                            value => panic!("Unexpected query result: {value:?}")
                    }
                },
-                },
                div {
                    class: "flex flex-row items-center gap-3",
-                    label {
-                        r#for: "input_deadline",
-                        class: "min-w-6 text-center",
-                        i {
-                            class: "fa-solid fa-bomb text-zinc-400/50"
-                        }
+                    InputLabel {
+                        icon: FaBomb,
+                        r#for: "input_deadline"
                    },
-                    input {
+                    Input {
                        name: "deadline",
-                        initial_value: task.as_ref().and_then(|task| task.deadline())
+                        initial_value: task.as_ref().and_then(|task| task.deadline)
                            .map(|deadline| deadline.format("%Y-%m-%d").to_string()),
                        r#type: "date",
-                        class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow basis-0",
-                        id: "input_deadline"
+                        class: "grow basis-0"
                    }
                },
                div {
                    class: "flex flex-row items-center gap-3",
-                    label {
-                        class: "min-w-6 text-center",
-                        i {
-                            class: "fa-solid fa-layer-group text-zinc-400/50"
-                        }
+                    InputLabel {
+                        icon: FaScroll
                    },
                    CategoryInput {
-                        selected_category: selected_category,
-                        class: "grow"
+                        class: "grow",
+                        selected_category: selected_category
                    }
                }
                match selected_category() {
                    Category::WaitingFor(waiting_for) => rsx! {
                        div {
                            class: "flex flex-row items-center gap-3",
-                            label {
-                                r#for: "input_deadline",
-                                class: "min-w-6 text-center",
-                                i {
-                                    class: "fa-solid fa-hourglass-end text-zinc-400/50"
-                                }
+                            InputLabel {
+                                icon: FaHourglassEnd,
+                                r#for: "input_category_waiting_for",
                            },
-                            input {
+                            Input {
+                                class: "grow",
                                name: "category_waiting_for",
                                required: true,
                                initial_value: waiting_for,
                                r#type: "text",
-                                class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow",
-                                id: "input_category_waiting_for"
-                            },
+                            }
                        }
                    },
                    Category::Calendar { date, reoccurrence, time } => rsx! {
                        div {
                            class: "flex flex-row items-center gap-3",
-                            label {
-                                r#for: "input_category_calendar_date",
-                                class: "min-w-6 text-center",
-                                i {
-                                    class: "fa-solid fa-clock text-zinc-400/50"
-                                }
+                            InputLabel {
+                                icon: FaClock,
+                                r#for: "input_category_calendar_date"
                            },
                            div {
-                                class: "grow flex flex-row gap-2",
-                                input {
-                                    r#type: "date",
+                                class: "grow flex flex-row gap-3",
+                                Input {
+                                    class: "grow",
                                    name: "category_calendar_date",
+                                    r#type: "date",
                                    required: true,
                                    initial_value: date.format("%Y-%m-%d").to_string(),
-                                    class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow",
-                                    id: "input_category_calendar_date"
                                },
-                                input {
-                                    r#type: "time",
+                                Input {
+                                    class: "grow",
                                    name: "category_calendar_time",
+                                    r#type: "time",
                                    initial_value: time.map(|calendar_time|
-                                        calendar_time.time().format("%H:%M").to_string()
+                                        calendar_time.time.format("%H:%M").to_string()
                                    ),
-                                    class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow",
-                                    id: "input_category_calendar_time",
-                                    oninput: move |event| {
+                                    oninput: move |event: Event<FormData>| {
                                        category_calendar_has_time.set(!event.value().is_empty());
                                    }
                                }
@@ -308,54 +269,46 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                        },
                        div {
                            class: "flex flex-row items-center gap-3",
-                            label {
-                                r#for: "category_calendar_reoccurrence_length",
-                                class: "min-w-6 text-center",
-                                i {
-                                    class: "fa-solid fa-repeat text-zinc-400/50"
-                                }
+                            InputLabel {
+                                icon: FaRepeat,
+                                r#for: "category_calendar_reoccurrence_length"
                            },
                            div {
-                                class: "grow grid grid-cols-6 gap-2",
+                                class: "grow grid grid-cols-5 items-end gap-3",
                                ReoccurrenceIntervalInput {
                                    reoccurrence_interval: category_calendar_reoccurrence_interval
                                },
-                                input {
+                                Input {
+                                    class: "text-right",
                                    r#type: "number",
                                    inputmode: "numeric",
                                    name: "category_calendar_reoccurrence_length",
                                    disabled: category_calendar_reoccurrence_interval().is_none(),
                                    required: true,
-                                    min: 1,
+                                    min: "1",
                                    initial_value: category_calendar_reoccurrence_interval().map_or(
                                        String::new(),
                                        |_| reoccurrence.map_or(1, |reoccurrence|
-                                            reoccurrence.length()).to_string()
-                                    ),
-                                    class: "py-2 px-3 bg-zinc-800/50 rounded-lg col-span-2 text-right",
-                                    id: "category_calendar_reoccurrence_length"
+                                            reoccurrence.length).to_string()
+                                    )
                                }
                            }
                        },
                        if category_calendar_has_time() {
                            div {
                                class: "flex flex-row items-center gap-3",
-                                label {
-                                    r#for: "category_calendar_reminder_offset_index",
-                                    class: "min-w-6 text-center",
-                                    i {
-                                        class: "fa-solid fa-bell text-zinc-400/50"
-                                    }
+                                InputLabel {
+                                    r#for: "input_category_calendar_reminder_offset_index",
+                                    icon: FaBell
                                },
                                input {
-                                    r#type: "range",
+                                    class: "grow",
                                    name: "category_calendar_reminder_offset_index",
+                                    r#type: "range",
                                    min: 0,
                                    max: REMINDER_OFFSETS.len() as i64 - 1,
                                    initial_value: category_calendar_reminder_offset_index()
                                        .to_string(),
-                                    class: "grow input-range-reverse",
-                                    id: "category_calendar_has_reminder",
                                    oninput: move |event| {
                                        category_calendar_reminder_offset_index.set(
                                            event.value().parse().unwrap()
@@ -363,8 +316,8 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                                    }
                                },
                                label {
-                                    r#for: "category_calendar_reminder_offset_index",
                                    class: "pr-3 min-w-16 text-right",
+                                    r#for: "category_calendar_reminder_offset_index",
                                    {REMINDER_OFFSETS[category_calendar_reminder_offset_index()]
                                        .map(
                                            |offset| if offset.num_hours() < 1 {
@@ -381,52 +334,83 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
                }
            },
            if let Some(task) = task.as_ref() {
+                SuspenseBoundary {
+                    fallback: |_| {
+                        VNode::empty()
+                    },
                    SubtasksForm {
                        task: task.clone()
                    }
                }
+            }
+        }
        div {
-                class: "flex flex-row justify-between mt-auto",
-                button {
+            class: "px-4 grid grid-cols-3 gap-3 mt-auto",
+            ButtonSecondary {
                r#type: "button",
-                    class: "py-2 px-4 bg-zinc-300/50 rounded-lg",
-                    onclick: move |_| {
+                class: "grow",
+                onclick: {
+                    let task = task.clone();
+                    move |_| {
                        let task = task.clone();
                        async move {
                            if let Some(task) = task {
-                                if *(task.category()) == Category::Trash {
-                                    let _ = delete_task(task.id()).await;
+                                let result = if let Category::Trash = task.category {
+                                    delete_task(task.id).await
                                } else {
-                                    let new_task = NewTask::new(
-                                        task.title().to_owned(),
-                                        task.deadline(),
-                                        Category::Trash,
-                                        task.project_id()
-                                    );
-
-                                    let _ = edit_task(task.id(), new_task).await;
+                                    let new_task = NewTask {
+                                        title: task.title.to_owned(),
+                                        deadline: task.deadline,
+                                        category: Category::Trash,
+                                        project_id: task.project_id
+                                    };
+                                    edit_task(task.id, new_task).await.map(|_| ())
+                                };
+                                if result.is_ok() {
+                                    /* TODO: Might not work on mobile due to
+                                    https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
+                                    */
+                                    navigator.go_back();
+                                }
+                            } else {
+                                navigator.go_back();
                            }
-
-                                query_client.invalidate_queries(&[
-                                    QueryKey::Tasks,
-                                    QueryKey::TasksInCategory(task.category().clone()),
-                                    QueryKey::TasksWithSubtasksInCategory(selected_category()),
-                                ]);
                        }
-                            on_successful_submit.call(());
                    }
                },
-                    i {
-                        class: "fa-solid fa-trash-can"
+                Icon {
+                    icon: FaTrashCan,
+                    height: 16,
+                    width: 16
                }
            }
-                button {
+            if task.is_some() {
+                div {
+                    class: "grow flex flex-col items-stretch",
+                    GoBackButton {
+                        ButtonSecondary {
+                            /* TODO: Replace w-full` with proper flexbox styling once
+                            https://github.com/DioxusLabs/dioxus/issues/5269 is solved. */
+                            class: "w-full",
+                            r#type: "button",
+                            Icon {
+                                icon: FaXmark,
+                                height: 16,
+                                width: 16
+                            }
+                        }
+                    }
+                }
+            } else {
+                div {}
+            }
+            ButtonPrimary {
                form: "form_task",
                r#type: "submit",
-                    class: "py-2 px-4 bg-zinc-300/50 rounded-lg",
-                    i {
-                        class: "fa-solid fa-floppy-disk"
-                    }
+                Icon {
+                    icon: FaStamp,
+                    height: 16,
+                    width: 16
                }
            }
        }
--- a/src/components/task_list.rs
+++ b/src/components/task_list.rs
@@ -1,83 +1,70 @@
+use crate::components::task_form::TASK_BEING_EDITED;
 use crate::components::task_list_item::TaskListItem;
 use crate::models::category::Category;
-use crate::models::task::{Task, TaskWithSubtasks};
-use crate::query::{QueryErrors, QueryKey, QueryValue};
+use crate::models::task::TaskWithSubtasks;
+use crate::route::Route;
 use crate::server::tasks::complete_task;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
-use dioxus_query::prelude::use_query_client;

 #[component]
 pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>) -> Element {
-    let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
-    let mut task_being_edited = use_context::<Signal<Option<Task>>>();
-
-    tasks.sort();
-
+    let navigator = use_navigator();
    rsx! {
        div {
            class: format!("flex flex-col {}", class.unwrap_or("")),
            for task in tasks.clone() {
                div {
-                    key: "{task.task().id()}",
+                    key: "{task.task.id}",
                    class: format!(
-                        "px-8 pt-4 {} flex flex-row gap-4 select-none {}",
-                        if task.task().deadline().is_some() || !task.subtasks().is_empty() {
-                            "pb-0.5"
-                        } else if let Category::Calendar { time, .. } = task.task().category() {
+                        "px-7 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
+                        if task.task.deadline.is_some() || !task.subtasks.is_empty() {
+                            "pb-0.25"
+                        } else if let Category::Calendar { time, .. } = &task.task.category {
                            if time.is_some() {
-                                "pb-0.5"
+                                "pb-0.25"
                            } else {
-                                "pb-4"
+                                "pb-3.75"
                            }
                        } else {
-                            "pb-4"
+                            "pb-3.75"
                        },
-                        if task_being_edited().is_some_and(|t| t.id() == task.task().id()) {
-                            "bg-zinc-700"
-                        } else { "" }
                    ),
                    onclick: {
                        let task = task.clone();
-                        move |_| task_being_edited.set(Some(task.task().clone()))
+                        move |_| {
+                            *TASK_BEING_EDITED.write() = Some(task.task.clone());
+                            navigator.push(Route::TaskFormPage);
+                        }
                    },
-                    i {
+                    button {
                        class: format!(
-                            "{} text-3xl align-middle h-9 text-zinc-500",
-                            if *(task.task().category()) == Category::Done {
-                                "fa solid fa-square-check"
-                            } else {
-                                "fa-regular fa-square"
-                            }
+                            "mt-0.5 hover:mt-0 hover:pb-0.5 transition-all duration-150 cursor-pointer {}",
+                            if let Category::Done = task.task.category { "pointer-events-none" }
+                            else { "" }
                        ),
                        onclick: {
-                            let task = task.clone();
                            move |event: Event<MouseData>| {
                                // To prevent editing the task.
                                event.stop_propagation();
-                                let task = task.clone();
                                async move {
-                                    let completed_task = complete_task(task.task().id()).await
-                                        .unwrap();
-                                    let mut query_keys = vec![
-                                        QueryKey::Tasks,
-                                        QueryKey::TasksInCategory(
-                                            completed_task.category().clone()
-                                        ),
-                                        QueryKey::TasksWithSubtasksInCategory(completed_task.category().clone()),
-                                    ];
-                                    if let Category::Calendar { reoccurrence: Some(_), .. }
-                                        = task.task().category() {
-                                        query_keys.push(
-                                            QueryKey::SubtasksOfTaskId(task.task().id())
-                                        );
-                                    }
-                                    query_client.invalidate_queries(&query_keys);
-                                }
+                                    let _ = complete_task(task.task.id).await;
                                }
                            }
                        },
+                        div {
+                            class: format!("h-8 w-8 rounded-full {}",
+                                if let Category::Done = task.task.category {
+                                    "mt-[3px] mb-[2px] bg-amber-300-muted"
+                                } else {
+                                    "mb-[5px] border-3 border-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)]"
+                                }
+                            )
+                        }
+                    },
+                    div {
+                        class: "mt-1.5",
                        TaskListItem {
                            task: task.clone()
                        }
@@ -85,4 +72,5 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
                }
            }
        }
+    }
 }
--- a/src/components/task_list_item.rs
+++ b/src/components/task_list_item.rs
@@ -5,29 +5,33 @@ use chrono::{Datelike, Local};
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
 use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::{FaBomb, FaClock, FaListCheck};
 use dioxus_i18n::prelude::i18n;
 use dioxus_i18n::t;
 use voca_rs::Voca;

 #[component]
 pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
+    let today_date = Local::now().date_naive();
    rsx! {
        div {
-            class: "flex flex-col",
+            class: "pt-0.75 flex flex-col",
            div {
-                class: "mt-2 grow font-medium",
-                {task.task().title()}
+                class: "grow font-medium text-pretty wrap-anywhere",
+                {task.task.title}
            },
            div {
                class: "flex flex-row gap-4",
-                if let Some(deadline) = task.task().deadline() {
+                if let Some(deadline) = task.task.deadline {
                    div {
-                        class: "text-sm text-zinc-400",
-                        i {
-                            class: "fa-solid fa-bomb"
-                        },
+                        class: "flex flex-row items-center gap-1 text-sm text-gray-500",
+                        Icon {
+                            icon: FaBomb,
+                            height: 14,
+                            width: 14
+                        }
                        {
-                            let today_date = Local::now().date_naive();
                            format!(
                                " {}",
                                if deadline == today_date - chrono::Days::new(1) {
@@ -69,32 +73,36 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
                        }
                    }
                }
-                if let Category::Calendar { time, .. } = task.task().category() {
+                if let Category::Calendar { time, .. } = task.task.category {
                    if let Some(calendar_time) = time {
                        div {
-                            class: "text-sm text-zinc-400",
-                            i {
-                                class: "fa-solid fa-clock"
-                            },
+                            class: "flex flex-row items-center gap-1 text-sm text-gray-500",
+                            Icon {
+                                icon: FaClock,
+                                height: 14,
+                                width: 14
+                            }
                            {
                                let format = t!("time-format");
-                                format!(" {}", calendar_time.time().format(format.as_str()))
+                                format!(" {}", calendar_time.time.format(format.as_str()))
                            }
                        }
                    }
                }
-                if !task.subtasks().is_empty() {
+                if !task.subtasks.is_empty() {
                    div {
-                        class: "text-sm text-zinc-400",
-                        i {
-                            class: "fa-solid fa-list-check"
-                        },
+                        class: "flex flex-row items-center gap-1 text-sm text-gray-500",
+                        Icon {
+                            icon: FaListCheck,
+                            height: 14,
+                            width: 14
+                        }
                        {format!(
                            " {}/{}",
-                            task.subtasks().iter()
-                                .filter(|subtask| subtask.is_completed())
+                            task.subtasks.iter()
+                                .filter(|subtask| subtask.is_completed)
                                .count(),
-                            task.subtasks().len()
+                            task.subtasks.len()
                        )}
                    }
                }
--- a/src/dotenv/mod.rs
+++ b/src/dotenv/mod.rs
@@ -0,0 +1,5 @@
+load_dotenv::load_dotenv!();
+
+pub(crate) const LANGUAGE_CODE: &str = env!("LANGUAGE_CODE");
+#[cfg(feature = "mobile")]
+pub(crate) const MOBILE_SERVER_URL: &str = env!("MOBILE_SERVER_URL");
--- a/src/errors/error.rs
+++ b/src/errors/error.rs
@@ -1,36 +0,0 @@
-use serde::{Deserialize, Serialize};
-use std::fmt::Display;
-use std::str::FromStr;
-
-#[derive(Serialize, Deserialize, Clone, Debug)]
-pub enum Error {
-    ServerInternal,
-}
-
-#[cfg(feature = "server")]
-impl From<diesel::result::Error> for Error {
-    fn from(_: diesel::result::Error) -> Self {
-        Self::ServerInternal
-    }
-}
-
-// has to be implemented for Dioxus server functions
-impl Display for Error {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            Self::ServerInternal => write!(f, "internal server error"),
-        }
-    }
-}
-
-// has to be implemented for Dioxus server functions
-impl FromStr for Error {
-    type Err = ();
-
-    fn from_str(s: &str) -> Result<Self, Self::Err> {
-        Ok(match s {
-            "internal server error" => Self::ServerInternal,
-            _ => return Err(()),
-        })
-    }
-}
--- a/src/errors/error_vec.rs
+++ b/src/errors/error_vec.rs
@@ -1,45 +0,0 @@
-use serde::Deserialize;
-use serde_with::serde_derive::Serialize;
-use std::fmt::Display;
-use std::str::FromStr;
-
-#[derive(Serialize, Deserialize, Clone, Debug)]
-pub struct ErrorVec<T> {
-    errors: Vec<T>,
-}
-
-impl<T> From<ErrorVec<T>> for Vec<T> {
-    fn from(e: ErrorVec<T>) -> Self {
-        e.errors
-    }
-}
-
-impl<T> From<Vec<T>> for ErrorVec<T> {
-    fn from(e: Vec<T>) -> Self {
-        ErrorVec { errors: e }
-    }
-}
-
-// has to be implemented for Dioxus server functions
-impl<T: Display> Display for ErrorVec<T> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(
-            f,
-            "{}",
-            self.errors
-                .iter()
-                .map(|e| e.to_string())
-                .collect::<Vec<String>>()
-                .join("\n")
-        )
-    }
-}
-
-// has to be implemented for Dioxus server functions
-impl<T> FromStr for ErrorVec<T> {
-    type Err = ();
-
-    fn from_str(_: &str) -> Result<Self, Self::Err> {
-        Ok(ErrorVec { errors: Vec::new() })
-    }
-}
--- a/src/errors/mod.rs
+++ b/src/errors/mod.rs
@@ -1,5 +0,0 @@
-pub(crate) mod error;
-pub(crate) mod error_vec;
-pub(crate) mod project_error;
-pub(crate) mod subtask_error;
-pub(crate) mod task_error;
--- a/src/errors/project_error.rs
+++ b/src/errors/project_error.rs
@@ -1,59 +0,0 @@
-use crate::errors::error::Error;
-use crate::errors::error_vec::ErrorVec;
-use serde::{Deserialize, Serialize};
-use std::fmt::Display;
-use std::str::FromStr;
-use validator::{ValidationErrors, ValidationErrorsKind};
-
-#[derive(Serialize, Deserialize, Debug)]
-pub enum ProjectError {
-    TitleLengthInvalid,
-    Error(Error),
-}
-
-impl From<ValidationErrors> for ErrorVec<ProjectError> {
-    fn from(validation_errors: ValidationErrors) -> Self {
-        validation_errors
-            .errors()
-            .iter()
-            .flat_map(|(&field, error_kind)| match field {
-                "title" => match error_kind {
-                    ValidationErrorsKind::Field(validation_errors) => validation_errors
-                        .iter()
-                        .map(|validation_error| validation_error.code.as_ref())
-                        .map(|code| match code {
-                            "title_length" => ProjectError::TitleLengthInvalid,
-                            _ => panic!("Unexpected validation error code: `{code}`."),
-                        })
-                        .collect::<Vec<ProjectError>>(),
-                    _ => panic!("Unexpected validation error kind."),
-                },
-                _ => panic!("Unexpected validation field name: `{field}`."),
-            })
-            .collect::<Vec<ProjectError>>()
-            .into()
-    }
-}
-
-#[cfg(feature = "server")]
-impl From<diesel::result::Error> for ProjectError {
-    fn from(_: diesel::result::Error) -> Self {
-        Self::Error(Error::ServerInternal)
-    }
-}
-
-// Has to be implemented for Dioxus server functions.
-impl Display for ProjectError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{:?}", self)
-    }
-}
-
-// Has to be implemented for Dioxus server functions.
-impl FromStr for ProjectError {
-    type Err = ();
-
-    fn from_str(_: &str) -> Result<Self, Self::Err> {
-        Ok(Self::Error(Error::ServerInternal))
-    }
-}
--- a/src/errors/subtask_error.rs
+++ b/src/errors/subtask_error.rs
@@ -1,79 +0,0 @@
-use crate::errors::error::Error;
-use crate::errors::error_vec::ErrorVec;
-use serde::{Deserialize, Serialize};
-use std::fmt::Display;
-use std::str::FromStr;
-use validator::{ValidationErrors, ValidationErrorsKind};
-
-#[derive(Serialize, Deserialize, Debug)]
-pub enum SubtaskError {
-    TitleLengthInvalid,
-    TaskNotFound,
-    Error(Error),
-}
-
-impl From<ValidationErrors> for ErrorVec<SubtaskError> {
-    fn from(validation_errors: ValidationErrors) -> Self {
-        validation_errors
-            .errors()
-            .iter()
-            .flat_map(|(&field, error_kind)| match field {
-                "title" => match error_kind {
-                    ValidationErrorsKind::Field(validation_errors) => validation_errors
-                        .iter()
-                        .map(|validation_error| validation_error.code.as_ref())
-                        .map(|code| match code {
-                            "title_length" => SubtaskError::TitleLengthInvalid,
-                            _ => panic!("Unexpected validation error code: `{code}`."),
-                        })
-                        .collect::<Vec<SubtaskError>>(),
-                    _ => panic!("Unexpected validation error kind."),
-                },
-                _ => panic!("Unexpected validation field name: `{field}`."),
-            })
-            .collect::<Vec<SubtaskError>>()
-            .into()
-    }
-}
-
-#[cfg(feature = "server")]
-impl From<diesel::result::Error> for SubtaskError {
-    fn from(diesel_error: diesel::result::Error) -> Self {
-        match diesel_error {
-            diesel::result::Error::DatabaseError(
-                diesel::result::DatabaseErrorKind::ForeignKeyViolation,
-                info,
-            ) => match info.constraint_name() {
-                Some("subtasks_task_id_fkey") => Self::TaskNotFound,
-                _ => Self::Error(Error::ServerInternal),
-            },
-            _ => Self::Error(Error::ServerInternal),
-        }
-    }
-}
-
-impl From<ErrorVec<Error>> for ErrorVec<SubtaskError> {
-    fn from(error_vec: ErrorVec<Error>) -> Self {
-        Vec::from(error_vec)
-            .into_iter()
-            .map(SubtaskError::Error)
-            .collect::<Vec<SubtaskError>>()
-            .into()
-    }
-}
-
-// Has to be implemented for Dioxus server functions.
-impl Display for SubtaskError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{:?}", self)
-    }
-}
-
-// Has to be implemented for Dioxus server functions.
-impl FromStr for SubtaskError {
-    type Err = ();
-
-    fn from_str(_: &str) -> Result<Self, Self::Err> {
-        Ok(Self::Error(Error::ServerInternal))
-    }
-}
--- a/src/errors/task_error.rs
+++ b/src/errors/task_error.rs
@@ -1,69 +0,0 @@
-use crate::errors::error::Error;
-use crate::errors::error_vec::ErrorVec;
-use serde::{Deserialize, Serialize};
-use std::fmt::Display;
-use std::str::FromStr;
-use validator::{ValidationErrors, ValidationErrorsKind};
-
-#[derive(Serialize, Deserialize, Debug)]
-pub enum TaskError {
-    TitleLengthInvalid,
-    ProjectNotFound,
-    Error(Error),
-}
-
-impl From<ValidationErrors> for ErrorVec<TaskError> {
-    fn from(validation_errors: ValidationErrors) -> Self {
-        validation_errors
-            .errors()
-            .iter()
-            .flat_map(|(&field, error_kind)| match field {
-                "title" => match error_kind {
-                    ValidationErrorsKind::Field(validation_errors) => validation_errors
-                        .iter()
-                        .map(|validation_error| validation_error.code.as_ref())
-                        .map(|code| match code {
-                            "title_length" => TaskError::TitleLengthInvalid,
-                            _ => panic!("Unexpected validation error code: `{code}`."),
-                        })
-                        .collect::<Vec<TaskError>>(),
-                    _ => panic!("Unexpected validation error kind."),
-                },
-                _ => panic!("Unexpected validation field name: `{field}`."),
-            })
-            .collect::<Vec<TaskError>>()
-            .into()
-    }
-}
-
-#[cfg(feature = "server")]
-impl From<diesel::result::Error> for TaskError {
-    fn from(diesel_error: diesel::result::Error) -> Self {
-        match diesel_error {
-            diesel::result::Error::DatabaseError(
-                diesel::result::DatabaseErrorKind::ForeignKeyViolation,
-                info,
-            ) => match info.constraint_name() {
-                Some("tasks_project_id_fkey") => Self::ProjectNotFound,
-                _ => Self::Error(Error::ServerInternal),
-            },
-            _ => Self::Error(Error::ServerInternal),
-        }
-    }
-}
-
-// Has to be implemented for Dioxus server functions.
-impl Display for TaskError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{:?}", self)
-    }
-}
-
-// Has to be implemented for Dioxus server functions.
-impl FromStr for TaskError {
-    type Err = ();
-
-    fn from_str(_: &str) -> Result<Self, Self::Err> {
-        Ok(Self::Error(Error::ServerInternal))
-    }
-}
--- a/src/hooks/mod.rs
+++ b/src/hooks/mod.rs
@@ -0,0 +1,116 @@
+use dioxus::{
+    CapturedError,
+    fullstack::{Loader, Loading, WebSocketOptions},
+    prelude::*,
+};
+use serde::{Serialize, de::DeserializeOwned};
+
+use crate::{
+    models::{category::Category, project::Project, subtask::Subtask, task::TaskWithSubtasks},
+    server::{
+        projects::get_projects, subtasks::get_subtasks_of_task,
+        tasks::get_tasks_with_subtasks_in_category, updates::subscribe_to_updates,
+    },
+};
+
+fn use_on_document_become_visible(mut callback: impl FnMut() + 'static) {
+    let callback = use_callback(move |_| callback());
+    use_effect(move || {
+        spawn(async move {
+            let mut eval = document::eval(
+                r#"
+                document.addEventListener("visibilitychange", () => {
+                if (!document.hidden) {
+                    dioxus.send(0);
+                }
+                });
+                "#,
+            );
+            loop {
+                eval.recv::<u8>()
+                    .await
+                    .expect("The JS code returned a value not parsable to `u8`.");
+                callback.call(());
+            }
+        });
+    });
+}
+
+#[allow(clippy::result_large_err)]
+fn sort_loader_result<T: Ord + Clone>(
+    result: Result<Loader<Vec<T>>, Loading>,
+) -> Result<Vec<T>, Loading> {
+    result.map(|loader| {
+        let mut items_sorted = loader();
+        items_sorted.sort();
+        items_sorted
+    })
+}
+
+#[allow(clippy::result_large_err)]
+fn use_loader_with_update_subscription<F, T, E>(
+    mut future: impl FnMut() -> F + 'static,
+) -> Result<Loader<T>, Loading>
+where
+    F: Future<Output = Result<T, E>> + 'static,
+    T: 'static + PartialEq + Serialize + DeserializeOwned,
+    E: Into<CapturedError> + 'static,
+{
+    let mut refresh_tick = use_signal(|| 0u64);
+    let mut websocket_reset_tick = use_signal(|| 0u64);
+
+    let loader = use_loader(move || {
+        let _ = refresh_tick(); // Read => dependency.
+        future()
+    });
+
+    use_effect(move || {
+        let initial_websocket_reset_tick = websocket_reset_tick();
+        spawn(async move {
+            let Ok(socket) =
+                subscribe_to_updates(WebSocketOptions::new().with_automatic_reconnect()).await
+            else {
+                return;
+            };
+            while socket.recv().await.is_ok() {
+                if websocket_reset_tick() != initial_websocket_reset_tick {
+                    // A new WebSocket has been created (a new task spawned), cleaning this one up.
+                    break;
+                }
+                refresh_tick += 1;
+            }
+        });
+    });
+
+    /* So that when the device goes to sleep or suspends the app, the WebSocket gets recreated on
+    waking up. It is important to do this only on becoming visible (document.hidden == false),
+    because becoming hidden is the part when network may not work and thus cause errors. */
+    use_on_document_become_visible(move || {
+        websocket_reset_tick += 1;
+        refresh_tick += 1;
+    });
+
+    loader
+}
+
+#[allow(clippy::result_large_err)]
+pub(crate) fn use_projects() -> Result<Vec<Project>, Loading> {
+    let result = use_loader_with_update_subscription(get_projects);
+    sort_loader_result(result)
+}
+
+#[allow(clippy::result_large_err)]
+pub(crate) fn use_tasks_with_subtasks_in_category(
+    filtered_category: Category,
+) -> Result<Vec<TaskWithSubtasks>, Loading> {
+    let result = use_loader_with_update_subscription(move || {
+        get_tasks_with_subtasks_in_category(filtered_category.clone())
+    });
+    sort_loader_result(result)
+}
+
+#[allow(clippy::result_large_err)]
+pub(crate) fn use_subtasks_of_task(task_id: i32) -> Result<Vec<Subtask>, Loading> {
+    let result = use_loader_with_update_subscription(move || get_subtasks_of_task(task_id));
+    sort_loader_result(result)
+}
--- a/src/internationalization/mod.rs
+++ b/src/internationalization/mod.rs
@@ -1,11 +1,18 @@
+use crate::dotenv;
 use chrono::Locale;
-use dioxus::fullstack::once_cell::sync::Lazy;
 use feruca::Collator;
 use std::ops::Deref;
-use std::sync::Mutex;
+use std::sync::{LazyLock, Mutex};
 use unic_langid_impl::LanguageIdentifier;

-pub(crate) static COLLATOR: Lazy<Mutex<Collator>> = Lazy::new(|| Mutex::new(Collator::default()));
+pub(crate) fn get_language_identifier() -> LanguageIdentifier {
+    dotenv::LANGUAGE_CODE
+        .parse::<LanguageIdentifier>()
+        .expect("The LANGUAGE_CODE environment variable is not a valid language code.")
+}
+
+pub(crate) static COLLATOR: LazyLock<Mutex<Collator>> =
+    LazyLock::new(|| Mutex::new(Collator::default()));

 pub(crate) struct LocaleFromLanguageIdentifier<'a>(&'a LanguageIdentifier);

--- a/src/layouts/mod.rs
+++ b/src/layouts/mod.rs
@@ -0,0 +1,2 @@
+pub(crate) mod navigation;
+pub(crate) mod suspense;
--- a/src/layouts/navigation.rs
+++ b/src/layouts/navigation.rs
@@ -0,0 +1,38 @@
+use crate::components::bottom_panel::BottomPanel;
+use crate::components::create_button::CreateButton;
+use crate::components::sticky_bottom::StickyBottom;
+use crate::components::task_form::LATEST_VISITED_CATEGORY;
+use crate::models::category::Category;
+use crate::route::Route;
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+
+#[component]
+pub(crate) fn Navigation() -> Element {
+    let current_route = use_route();
+    use_effect(use_reactive(&current_route, move |current_route| {
+        *LATEST_VISITED_CATEGORY.write() = match current_route {
+            Route::CategorySomedayMaybePage => Category::SomedayMaybe,
+            Route::CategoryWaitingForPage => Category::WaitingFor(String::new()),
+            Route::CategoryNextStepsPage => Category::NextSteps,
+            Route::CategoryCalendarPage | Route::CategoryTodayPage => Category::Calendar {
+                date: chrono::Local::now().date_naive(),
+                reoccurrence: None,
+                time: None,
+            },
+            _ => Category::Inbox,
+        };
+    }));
+
+    rsx! {
+        div {
+            class: "grow flex flex-col pb-36",
+            Outlet::<Route> {}
+        }
+        StickyBottom {
+            CreateButton {},
+            BottomPanel {}
+        }
+    }
+}
--- a/src/layouts/suspense.rs
+++ b/src/layouts/suspense.rs
@@ -0,0 +1,28 @@
+use crate::route::Route;
+use dioxus::core_macro::rsx;
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_free_icons::Icon;
+use dioxus_free_icons::icons::fa_solid_icons::FaCog;
+
+#[component]
+pub(crate) fn Suspense() -> Element {
+    rsx! {
+        SuspenseBoundary {
+            fallback: |_| {
+                rsx! {
+                    div {
+                        class: "grow flex flex-col justify-center items-center",
+                        Icon {
+                            class: "text-gray-500 animate-[spin_3000ms_linear_infinite]",
+                            icon: FaCog,
+                            height: 32,
+                            width: 32
+                        }
+                    }
+                }
+            },
+            Outlet::<Route> {}
+        }
+    }
+}
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,15 +1,17 @@
 mod components;
-mod errors;
+mod dotenv;
+mod hooks;
 mod internationalization;
+mod layouts;
 #[cfg(feature = "server")]
 mod migrations;
 mod models;
-mod query;
 mod route;
 #[cfg(feature = "server")]
 mod schema;
 mod server;
 mod utils;
+mod views;

 use components::app::App;
 use dioxus::prelude::*;
@@ -21,6 +23,9 @@ fn main() {
        migrations::run_migrations().expect("Failed to run migrations.");
    );

-    info!("Starting app.");
+    #[cfg(feature = "mobile")]
+    dioxus::fullstack::set_server_url(crate::dotenv::MOBILE_SERVER_URL);
+
+    info!("Starting the app.");
    launch(App);
 }
--- a/src/migrations/mod.rs
+++ b/src/migrations/mod.rs
@@ -1,4 +1,4 @@
-use diesel_migrations::{embed_migrations, EmbeddedMigrations, MigrationHarness};
+use diesel_migrations::{EmbeddedMigrations, MigrationHarness, embed_migrations};
 use std::error::Error;

 const MIGRATIONS: EmbeddedMigrations = embed_migrations!("migrations");
--- a/src/models/category.rs
+++ b/src/models/category.rs
@@ -104,54 +104,15 @@ pub enum ReoccurrenceInterval {

 #[derive(Serialize, Deserialize, Hash, Clone, Debug)]
 pub struct Reoccurrence {
-    start_date: NaiveDate,
-    interval: ReoccurrenceInterval,
-    length: u32,
-}
-
-impl Reoccurrence {
-    pub fn new(start_date: NaiveDate, interval: ReoccurrenceInterval, length: u32) -> Self {
-        Self {
-            start_date,
-            interval,
-            length,
-        }
-    }
-
-    pub fn start_date(&self) -> NaiveDate {
-        self.start_date
-    }
-
-    pub fn interval(&self) -> &ReoccurrenceInterval {
-        &self.interval
-    }
-
-    pub fn length(&self) -> u32 {
-        self.length
-    }
+    pub start_date: NaiveDate,
+    pub interval: ReoccurrenceInterval,
+    pub length: u32,
 }

 #[serde_with::serde_as]
 #[derive(Serialize, Deserialize, Hash, Clone, Debug)]
 pub struct CalendarTime {
-    time: NaiveTime,
+    pub time: NaiveTime,
    #[serde_as(as = "Option<DurationSeconds<i64>>")]
-    reminder_offset: Option<Duration>,
-}
-
-impl CalendarTime {
-    pub fn new(time: NaiveTime, reminder_offset: Option<Duration>) -> Self {
-        Self {
-            time,
-            reminder_offset,
-        }
-    }
-
-    pub fn time(&self) -> NaiveTime {
-        self.time
-    }
-
-    pub fn reminder_offset(&self) -> Option<Duration> {
-        self.reminder_offset
-    }
+    pub reminder_offset: Option<Duration>,
 }
--- a/Show More
+++ b/Show More