From 7f2b63085cee70d10b51c1d2aa3351a14dbbd67c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 20 Jun 2024 20:09:04 +0200
Subject: [PATCH 01/13] build(deps): bump ws from 6.2.2 to 6.2.3 in
 /Client/reasn-client (#63)

Bumps [ws](https://github.com/websockets/ws) from 6.2.2 to 6.2.3.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/compare/6.2.2...6.2.3)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Client/reasn-client/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Client/reasn-client/yarn.lock b/Client/reasn-client/yarn.lock
index dd808908..ddc14b28 100644
--- a/Client/reasn-client/yarn.lock
+++ b/Client/reasn-client/yarn.lock
@@ -17869,11 +17869,11 @@ __metadata:
   linkType: hard
 
 "ws@npm:^6.2.2":
-  version: 6.2.2
-  resolution: "ws@npm:6.2.2"
+  version: 6.2.3
+  resolution: "ws@npm:6.2.3"
   dependencies:
     async-limiter: "npm:~1.0.0"
-  checksum: 10c0/d628a1e95668a296644b4f51ce5debb43d9f1d89ebb2e32fef205a685b9439378eb824d60ce3a40bbc3bad0e887d84a56b343f2076f48d74f17c4c0800c42967
+  checksum: 10c0/56a35b9799993cea7ce2260197e7879f21bbbb194a967f31acbbda6f7f46ecda4365951966fb062044c95197e19fb2f053be6f65c172435455186835f494de41
   languageName: node
   linkType: hard
 

From 1cd49c1be4113f34994a8bd99392e22fe6c70a20 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 20 Jun 2024 22:05:36 +0200
Subject: [PATCH 02/13] build(deps): bump next from 14.1.0 to 14.1.1 in
 /Client/reasn-client (#64)

Bumps [next](https://github.com/vercel/next.js) from 14.1.0 to 14.1.1.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/compare/v14.1.0...v14.1.1)

---
updated-dependencies:
- dependency-name: next
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Client/reasn-client/apps/web/package.json |   2 +-
 Client/reasn-client/yarn.lock             | 113 ++++++++++++----------
 2 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/Client/reasn-client/apps/web/package.json b/Client/reasn-client/apps/web/package.json
index 47f2123c..27233e01 100644
--- a/Client/reasn-client/apps/web/package.json
+++ b/Client/reasn-client/apps/web/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@reasn/ui": "*",
-    "next": "^14.0.4",
+    "next": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.19.10"
diff --git a/Client/reasn-client/yarn.lock b/Client/reasn-client/yarn.lock
index ddc14b28..0e2cc3a5 100644
--- a/Client/reasn-client/yarn.lock
+++ b/Client/reasn-client/yarn.lock
@@ -3344,10 +3344,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/env@npm:14.1.0"
-  checksum: 10c0/f45ce1e3dad87cdbddc58b06bd411f44a6d21dfc2c344d02a5e1b07f56fbc9a39e192c0b0917df9f2e9e4e2156306a8c78f173ca4b53932c2793e67797462a23
+"@next/env@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/env@npm:14.2.4"
+  checksum: 10c0/cc284e3dd0666df04d8321645d8409c10cb8e325884c226abbb2e7bea20f0a4232f988216aa506a9d0457b46f28b594a61179d1e978c0ca22497cd8cab8196c7
   languageName: node
   linkType: hard
 
@@ -3360,65 +3360,65 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-darwin-arm64@npm:14.1.0"
+"@next/swc-darwin-arm64@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-darwin-arm64@npm:14.2.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-darwin-x64@npm:14.1.0"
+"@next/swc-darwin-x64@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-darwin-x64@npm:14.2.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0"
+"@next/swc-linux-arm64-gnu@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-linux-arm64-gnu@npm:14.2.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-arm64-musl@npm:14.1.0"
+"@next/swc-linux-arm64-musl@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-linux-arm64-musl@npm:14.2.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-x64-gnu@npm:14.1.0"
+"@next/swc-linux-x64-gnu@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-linux-x64-gnu@npm:14.2.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-x64-musl@npm:14.1.0"
+"@next/swc-linux-x64-musl@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-linux-x64-musl@npm:14.2.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0"
+"@next/swc-win32-arm64-msvc@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-win32-arm64-msvc@npm:14.2.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0"
+"@next/swc-win32-ia32-msvc@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-win32-ia32-msvc@npm:14.2.4"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-win32-x64-msvc@npm:14.1.0"
+"@next/swc-win32-x64-msvc@npm:14.2.4":
+  version: 14.2.4
+  resolution: "@next/swc-win32-x64-msvc@npm:14.2.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -4326,12 +4326,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.2":
-  version: 0.5.2
-  resolution: "@swc/helpers@npm:0.5.2"
+"@swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:0.5.5":
+  version: 0.5.5
+  resolution: "@swc/helpers@npm:0.5.5"
   dependencies:
+    "@swc/counter": "npm:^0.1.3"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/b6fa49bcf6c00571d0eb7837b163f8609960d4d77538160585e27ed167361e9776bd6e5eb9646ffac2fb4d43c58df9ca50dab9d96ab097e6591bc82a75fd1164
+  checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d
   languageName: node
   linkType: hard
 
@@ -12828,21 +12836,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.0.4":
-  version: 14.1.0
-  resolution: "next@npm:14.1.0"
+"next@npm:^14.1.1":
+  version: 14.2.4
+  resolution: "next@npm:14.2.4"
   dependencies:
-    "@next/env": "npm:14.1.0"
-    "@next/swc-darwin-arm64": "npm:14.1.0"
-    "@next/swc-darwin-x64": "npm:14.1.0"
-    "@next/swc-linux-arm64-gnu": "npm:14.1.0"
-    "@next/swc-linux-arm64-musl": "npm:14.1.0"
-    "@next/swc-linux-x64-gnu": "npm:14.1.0"
-    "@next/swc-linux-x64-musl": "npm:14.1.0"
-    "@next/swc-win32-arm64-msvc": "npm:14.1.0"
-    "@next/swc-win32-ia32-msvc": "npm:14.1.0"
-    "@next/swc-win32-x64-msvc": "npm:14.1.0"
-    "@swc/helpers": "npm:0.5.2"
+    "@next/env": "npm:14.2.4"
+    "@next/swc-darwin-arm64": "npm:14.2.4"
+    "@next/swc-darwin-x64": "npm:14.2.4"
+    "@next/swc-linux-arm64-gnu": "npm:14.2.4"
+    "@next/swc-linux-arm64-musl": "npm:14.2.4"
+    "@next/swc-linux-x64-gnu": "npm:14.2.4"
+    "@next/swc-linux-x64-musl": "npm:14.2.4"
+    "@next/swc-win32-arm64-msvc": "npm:14.2.4"
+    "@next/swc-win32-ia32-msvc": "npm:14.2.4"
+    "@next/swc-win32-x64-msvc": "npm:14.2.4"
+    "@swc/helpers": "npm:0.5.5"
     busboy: "npm:1.6.0"
     caniuse-lite: "npm:^1.0.30001579"
     graceful-fs: "npm:^4.2.11"
@@ -12850,6 +12858,7 @@ __metadata:
     styled-jsx: "npm:5.1.1"
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
+    "@playwright/test": ^1.41.2
     react: ^18.2.0
     react-dom: ^18.2.0
     sass: ^1.3.0
@@ -12875,11 +12884,13 @@ __metadata:
   peerDependenciesMeta:
     "@opentelemetry/api":
       optional: true
+    "@playwright/test":
+      optional: true
     sass:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 10c0/dbb1ef8d22eec29a9127d28ed46eb34f14e3f7f7b4e4b91dc96027feb4d9ead554a804275484d9a54026e6e55d632d3997561e598c1fb8e8956e77614f39765f
+  checksum: 10c0/630c2a197b57c1f29caf4672a0f8fb74dbb048e77e4513f567279467332212f3eebcb68279885f1d525d7aaebbb452f522b02c0b5cd3ca66f385341e4b4eac67
   languageName: node
   linkType: hard
 
@@ -17450,7 +17461,7 @@ __metadata:
     eslint: "npm:^8.57.0"
     eslint-config-next: "npm:14.0.4"
     eslint-config-prettier: "npm:^9.1.0"
-    next: "npm:^14.0.4"
+    next: "npm:^14.1.1"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-native-web: "npm:^0.19.10"

From 3d0b8163564aff9c35623697cfce546d8d87459a Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sat, 22 Jun 2024 21:51:31 +0200
Subject: [PATCH 03/13] [RSN-69] - Event page UI (#65)

* feat: added simple event page

* feat: implemented comments section

* feat: changed info to icons

* feat: implemented edit event page

* feat: implemented add/edit event page + RWD

* feat: small RWD changes + possibility to cancel event
---
 .../apps/web/app/events/[slug]/edit/page.tsx  | 359 ++++++++++++++++++
 .../apps/web/app/events/[slug]/page.tsx       | 288 ++++++++++++++
 .../apps/web/app/events/layout.tsx            |  20 +
 .../apps/web/app/events/new/page.tsx          | 272 +++++++++++++
 .../apps/web/app/login/layout.tsx             |   2 +-
 .../reasn-client/apps/web/app/login/page.tsx  |   8 +-
 .../apps/web/app/register/layout.tsx          |   2 +-
 .../apps/web/app/register/organizer/page.tsx  |   8 +-
 .../apps/web/app/register/page.tsx            |   8 +-
 .../apps/web/app/register/user/page.tsx       |   8 +-
 Client/reasn-client/jest.config.ts            |   1 +
 .../packages/common/helpers/uiHelpers.ts      |  20 +
 .../packages/common/hooks/useColorWorker.ts   |  28 ++
 .../packages/common/workers/colorWorker.ts    |  56 +++
 .../ui/src/components/shared/Card.tsx         |  54 ++-
 .../ui/src/components/shared/Comment.tsx      |  35 ++
 .../ui/src/components/shared/form/Button.tsx  |   7 +-
 .../src/components/shared/form/Dropdown.tsx   | 160 ++++++++
 .../ui/src/components/shared/form/Input.tsx   |  75 +++-
 .../src/components/shared/form/Textarea.tsx   |  60 +++
 .../ui/src/components/shared/form/index.tsx   |   2 +
 .../ui/src/components/shared/index.tsx        |   1 +
 .../ui/src/components/web/main/CTASection.tsx |   6 +-
 .../src/components/web/main/HeroSection.tsx   |   6 +-
 .../src/components/web/main/QuickFilters.tsx  |   8 +-
 .../packages/ui/src/icons/ArrowLeft.tsx       |  39 ++
 .../packages/ui/src/icons/ArrowRight.tsx      |  39 ++
 .../packages/ui/src/icons/CaretDown.tsx       |  38 ++
 .../packages/ui/src/icons/CaretUp.tsx         |  38 ++
 .../packages/ui/src/icons/Clock.tsx           |  38 ++
 .../packages/ui/src/icons/IconProps.ts        |   1 +
 .../packages/ui/src/icons/Location.tsx        |  38 ++
 .../packages/ui/src/icons/QuestionCircle.tsx  |  38 ++
 .../packages/ui/src/icons/TickCircle.tsx      |  38 ++
 .../packages/ui/src/icons/Upload.tsx          |  38 ++
 .../packages/ui/src/icons/index.tsx           |   9 +
 .../reasn-client/packages/ui/src/styles.css   |  30 +-
 Client/reasn-client/turbo.json                |   2 +-
 38 files changed, 1825 insertions(+), 55 deletions(-)
 create mode 100644 Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
 create mode 100644 Client/reasn-client/apps/web/app/events/[slug]/page.tsx
 create mode 100644 Client/reasn-client/apps/web/app/events/layout.tsx
 create mode 100644 Client/reasn-client/apps/web/app/events/new/page.tsx
 create mode 100644 Client/reasn-client/packages/common/helpers/uiHelpers.ts
 create mode 100644 Client/reasn-client/packages/common/hooks/useColorWorker.ts
 create mode 100644 Client/reasn-client/packages/common/workers/colorWorker.ts
 create mode 100644 Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/components/shared/form/Textarea.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/ArrowLeft.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/ArrowRight.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/CaretDown.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/CaretUp.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Clock.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Location.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/QuestionCircle.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/TickCircle.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Upload.tsx

diff --git a/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
new file mode 100644
index 00000000..963aeb45
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
@@ -0,0 +1,359 @@
+"use client";
+
+import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card";
+import {
+  ButtonBase,
+  FloatingInput,
+  FloatingTextarea,
+  SearchMultiDropdown,
+  SingleDropdown,
+} from "@reasn/ui/src/components/shared/form";
+import { ChangeEvent, useState } from "react";
+import { ArrowLeft, Clock, Location, Upload } from "@reasn/ui/src/icons";
+import { useRouter } from "next/navigation";
+import clsx from "clsx";
+import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { BaseInput } from "@reasn/ui/src/components/shared/form/Input";
+import { getStatusClass } from "@reasn/common/helpers/uiHelpers";
+
+const IMAGES = [
+  "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  MOCK_IMG_URL,
+  "https://images.pexels.com/photos/19867588/pexels-photo-19867588/free-photo-of-happy-pongal.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/6297150/pexels-photo-6297150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/1820563/pexels-photo-1820563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/534164/pexels-photo-534164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/54332/currant-immature-bush-berry-54332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+];
+
+const MOCK_TAGS = [
+  "abcd",
+  "efgh",
+  "ijkl",
+  "mnop",
+  "qrst",
+  "uvwx",
+  "yzab",
+  "cdef",
+  "ghij",
+  "dada",
+  "vvvv",
+  "bgbfgb",
+  "nfnfnf",
+  "mmjmjm",
+  ",lkyt",
+  "t554",
+  "fsdfs",
+  "hhhhh",
+  "fsf",
+  "u234ghhvwx",
+  "nh",
+  "sdfsf4",
+  "ses5",
+];
+
+const MOCK_PARAMS: { [key: string]: string } = {
+  abcd: "efgh",
+  ijkl: "mnop",
+  qrst: "uvwx",
+  yzab: "cdef",
+  ghij: "ijkl",
+  mnop: "qrst",
+  uvwx: "yzab",
+  cdef: "ghij",
+};
+
+const EventEditPage = ({ params }: { params: { slug: string } }) => {
+  const { slug } = params;
+  const router = useRouter();
+  const [status, setStatus] = useState<string>(EventStatus.REJECTED);
+
+  const admin = slug === "edit";
+
+  const [imgs, setImgs] = useState<string[]>(
+    IMAGES.sort(() => Math.random() - 0.5).slice(0, 3),
+  );
+
+  const [tags, setTags] = useState<string[]>(MOCK_TAGS.slice(0, 5));
+
+  const [paramsKeys, setParamsKeys] = useState<string[]>(
+    Object.keys(MOCK_PARAMS).slice(0, 3),
+  );
+
+  const handleRedirect = () => {
+    let conf = confirm("Czy na pewno chcesz wyjść bez zapisywania zmian?");
+
+    if (conf) {
+      router.push(`/events/${slug}`);
+    }
+  };
+
+  const handleImageUpload = (
+    event: ChangeEvent<HTMLInputElement>,
+    idx: number,
+  ) => {
+    const file = event?.target?.files?.[0];
+    if (file) {
+      const fileURL = URL.createObjectURL(file);
+      setImgs((prevImgs) => {
+        const newImgs = [...prevImgs];
+        newImgs[idx] = fileURL;
+        return newImgs;
+      });
+    }
+  };
+
+  return (
+    <div className="relative flex w-full flex-col gap-5">
+      <div
+        className={clsx(
+          "absolute bottom-[50%] right-[-50%] z-0 h-[80%] w-[200%] rounded-full blur-3xl",
+          "bg-gradient-to-r to-[#4E4F75] opacity-20 duration-1000",
+          getStatusClass(status as EventStatus),
+        )}
+      ></div>
+      <div className="relative flex w-full justify-between">
+        <div
+          className="flex w-[25vw] min-w-[25vw] cursor-pointer flex-row items-center gap-2 font-semibold"
+          onClick={handleRedirect}
+        >
+          <ArrowLeft className="h-5 w-5 fill-slate-400" />
+          <h3>cofnij do wydarzenia</h3>
+        </div>
+        <div className="relative flex w-1/4 flex-row justify-evenly gap-8">
+          <ButtonBase text="zapisz" onClick={() => {}} className="w-full" />
+        </div>
+      </div>
+      <div className="flex w-full flex-row flex-wrap justify-between gap-5 xl:flex-nowrap">
+        <div className="flex h-max min-h-[50vh] w-full flex-col justify-between rounded-lg bg-[#1E1F296d] p-5 backdrop-blur-lg xl:w-[25vw] xl:min-w-[25vw]">
+          {admin ? (
+            <SingleDropdown
+              label="Status"
+              options={Object.values(EventStatus)}
+              selectedOption={status}
+              setSelectedOption={setStatus}
+              selectedOptionClass={`font-bold uppercase ${getStatusClass(
+                status as EventStatus,
+              )}`}
+            />
+          ) : (
+            <div className="flex flex-row items-center justify-between gap-[20%]">
+              <p
+                className={clsx(
+                  "font-bold uppercase",
+                  getStatusClass(status as EventStatus),
+                )}
+              >
+                {status}
+              </p>
+              <ButtonBase
+                text="anuluj wydarzenie"
+                onClick={() => {}}
+                className="grow from-red-400 to-red-700 font-semibold text-black"
+              />
+            </div>
+          )}
+          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+            <SearchMultiDropdown
+              label="Wyszukaj tagi"
+              options={MOCK_TAGS}
+              selectedOptions={tags}
+              setSelectedOptions={setTags}
+            />
+            <div className="mt-2 flex flex-wrap gap-2">
+              <h3 className="font-semibold">Wybrane tagi:</h3>
+              {tags.map((tag, idx) => (
+                <p
+                  key={idx + tag}
+                  className="rounded-md bg-[#4E4F75] px-[5px] py-[1px]"
+                >
+                  {tag}
+                </p>
+              ))}
+            </div>
+          </div>
+          <div className="mt-10">
+            <FloatingTextarea
+              label="Tytuł"
+              name="description"
+              defaultValue="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque,
+              nam."
+              className="h-28 text-lg"
+            />
+          </div>
+          <div className="mt-8 flex h-full flex-col gap-8 font-thin">
+            <div className="flex flex-row items-center gap-2">
+              <Clock className="h-5 w-5 fill-slate-400" />
+              <FloatingInput
+                label="Data od"
+                type="date"
+                name="dateFrom"
+                defaultValue={"2024-12-12"}
+                className="grow"
+              />
+              <FloatingInput
+                label="Czas od"
+                type="time"
+                name="timeFrom"
+                defaultValue={"12:00"}
+                className="w-1/3"
+              />
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <Clock className="h-5 w-5 fill-slate-400" />
+              <FloatingInput
+                label="Data do"
+                type="date"
+                name="dateFrom"
+                defaultValue={"2024-12-13"}
+                className="grow"
+              />
+              <FloatingInput
+                label="Czas do"
+                type="time"
+                name="timeFrom"
+                defaultValue={"23:58"}
+                className="w-1/3"
+              />
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <Location className="h-5 w-5 fill-slate-400" />
+              <div className="flex w-full flex-wrap gap-8">
+                <FloatingInput
+                  label="Kraj"
+                  type="text"
+                  name="country"
+                  defaultValue="Polska"
+                  className="w-full"
+                />
+                <FloatingInput
+                  label="Miasto"
+                  type="text"
+                  name="city"
+                  defaultValue="Wrocław"
+                  className="w-full"
+                />
+                <FloatingInput
+                  label="Województwo"
+                  type="text"
+                  name="state"
+                  defaultValue="Dolnośląskie"
+                  className="w-full"
+                />
+                <FloatingInput
+                  label="Ulica"
+                  type="text"
+                  name="street"
+                  defaultValue="C-16 Politechnika Wrocławska"
+                  className="w-full"
+                />
+              </div>
+            </div>
+            <div>
+              <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
+              <SearchMultiDropdown
+                label="Wyszukaj parametry"
+                options={Object.keys(MOCK_PARAMS)}
+                selectedOptions={paramsKeys}
+                setSelectedOptions={setParamsKeys}
+              />
+              <div className="ml-5 mt-2 flex flex-col gap-1">
+                <h3 className="font-semibold">Wybrane parametry:</h3>
+                {paramsKeys?.map((key, idx) => (
+                  <div
+                    key={idx + key}
+                    className="flex items-center justify-between"
+                  >
+                    <span className="mr-2 w-1/4 rounded-md bg-[#4E4F75] px-[5px] py-[1px]">
+                      {key}:
+                    </span>
+                    <BaseInput
+                      type="text"
+                      defaultValue={MOCK_PARAMS[key]}
+                      className="w-full"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="mt-8 flex items-center gap-2">
+            <div className="relative rounded-full bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-[2px]">
+              <img
+                src="https://avatars.githubusercontent.com/u/63869461?v=4"
+                alt="avatar"
+                className="relative z-10 h-10 w-10 rounded-full"
+              />
+            </div>
+            <p>Nazwa organizatora</p>
+          </div>
+          <div className="mt-3 text-xs font-thin text-[#ccc]">
+            <p>utworzono: 13 czerwca 2024r. 12:25</p>
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-5">
+          <div className="relative z-10 grid h-[50vh] w-full grid-cols-2 grid-rows-2 gap-3 overflow-hidden rounded-lg">
+            {[0, 1, 2, 3].map((idx) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <div
+                className="group relative h-full w-full overflow-clip"
+                key={idx}
+              >
+                <div
+                  onClick={() => {
+                    const element = document?.querySelector(
+                      `input[name="img-${idx}"]`,
+                    );
+                    if (element instanceof HTMLInputElement) {
+                      element.click();
+                    }
+                  }}
+                  className="absolute z-20 flex h-full w-full cursor-pointer items-center justify-center bg-black opacity-0 duration-300 group-hover:opacity-50"
+                >
+                  <Upload className="h-10 w-10 fill-white" />
+                </div>
+                <input
+                  type="file"
+                  hidden
+                  name={`img-${idx}`}
+                  accept="image/png, image/jpeg"
+                  onChange={(e) => handleImageUpload(e, idx)}
+                />
+                {imgs[idx] ? (
+                  <img
+                    src={imgs[idx]}
+                    alt=""
+                    className="relative z-10 h-full w-full object-cover duration-300 group-hover:blur-[2px]"
+                  />
+                ) : (
+                  <div className="relative z-10 h-full w-full bg-[#1E1F29]"></div>
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="relative">
+            <div className="mt-8">
+              <FloatingTextarea
+                label="Opis"
+                name="comment"
+                defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Necessitatibus aspernatur quibusdam saepe enim totam suscipit
+                tempore facere aut id sint ratione placeat, magni ipsa quo
+                assumenda odit atque omnis, sequi, impedit reiciendis. Provident
+                nobis quaerat maxime beatae sapiente. Placeat, obcaecati
+                doloremque laboriosam cumque, praesentium necessitatibus itaque
+                consequuntur ex dignissimos quam atque beatae impedit temporibus
+                dicta ab magnam dolorum corrupti sit enim! Ipsa, omnis nisi."
+                className="h-48"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventEditPage;
diff --git a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
new file mode 100644
index 00000000..deb47f14
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
@@ -0,0 +1,288 @@
+"use client";
+
+import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card";
+import { ButtonBase } from "@reasn/ui/src/components/shared/form";
+import { Comment } from "@reasn/ui/src/components/shared/Comment";
+import { useEffect, useRef, useState } from "react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Clock,
+  Location,
+  QuestionCircle,
+  TickCircle,
+} from "@reasn/ui/src/icons";
+import { useRouter } from "next/navigation";
+
+import useColorWorker from "@reasn/common/hooks/useColorWorker";
+
+const IMAGES = [
+  "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  MOCK_IMG_URL,
+  "https://images.pexels.com/photos/19867588/pexels-photo-19867588/free-photo-of-happy-pongal.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/6297150/pexels-photo-6297150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/1820563/pexels-photo-1820563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/534164/pexels-photo-534164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  "https://images.pexels.com/photos/54332/currant-immature-bush-berry-54332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+];
+
+const MOCK_TAGS = [
+  "abcd",
+  "efgh",
+  "ijkl",
+  "mnop",
+  "qrst",
+  "uvwx",
+  "yzab",
+  "cdef",
+  "ghij",
+  "ijkl",
+  "mnop",
+  "qrst",
+  "uvwx",
+  "yzab",
+  "cdef",
+  "ghij",
+  "ijkl",
+  "mnop",
+  "qrst",
+  "uvwx",
+  "yzab",
+  "cdef",
+  "ghij",
+];
+
+const MOCK_PARAMS: { [key: string]: string } = {
+  abcd: "efgh",
+  ijkl: "mnop",
+  qrst: "uvwx",
+  yzab: "cdef",
+  ghij: "ijkl",
+  mnop: "qrst",
+  uvwx: "yzab",
+  cdef: "ghij",
+};
+
+const EventPage = ({ params }: { params: { slug: string } }) => {
+  const { slug } = params;
+  const imgRef = useRef<HTMLImageElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [gradient, setGradient] = useState<string>("");
+  const editPage = slug === "edit";
+  const router = useRouter();
+
+  const [imgs, setImgs] = useState<string[]>(IMAGES);
+
+  const [currentImageIdx, setCurrentImageIdx] = useState<number>(0);
+
+  const [imageData, setImageData] = useState<Uint8ClampedArray>();
+
+  useEffect(() => {
+    const img = imgRef.current;
+    const canvas = canvasRef.current;
+
+    if (!img || !canvas) {
+      return;
+    }
+
+    const ctx = canvas.getContext("2d");
+
+    if (!ctx) {
+      return;
+    }
+
+    img.crossOrigin = "Anonymous";
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+
+      const imageData = ctx.getImageData(
+        0,
+        0,
+        canvas.width,
+        canvas.height,
+      ).data;
+      setImageData(imageData);
+    };
+  }, [imgRef.current]);
+
+  const dominantColors = useColorWorker(imageData);
+
+  useEffect(() => {
+    if (dominantColors.length === 0) return;
+
+    const dominantColorsRgb = dominantColors.map((color: string) => {
+      const [r, g, b] = color.split(",").map(Number);
+      return `rgb(${r}, ${g}, ${b})`;
+    });
+
+    setGradient(`linear-gradient(to right, ${dominantColorsRgb.join(", ")})`);
+  }, [dominantColors]);
+
+  const handleRedirect = () => {
+    router.push(`/events/${slug}/edit`);
+  };
+
+  return (
+    <div className="flex w-full flex-col gap-5">
+      <div className="flex w-full flex-row flex-wrap justify-between gap-5 xl:flex-nowrap">
+        <div
+          className="absolute bottom-[50%] right-[-50%] z-0 h-[80%] w-[200%] rounded-full blur-3xl duration-1000"
+          style={{ background: gradient, opacity: gradient ? "0.25" : "0" }}
+        ></div>
+        <div className="flex h-max min-h-[50vh] w-full flex-col justify-between rounded-lg bg-[#1E1F296d] p-5 backdrop-blur-lg xl:w-[25vw] xl:min-w-[25vw]">
+          <p className="mb-2 font-bold text-orange-400">DO AKCEPTACJI</p>
+          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+            {MOCK_TAGS.map((tag, idx) => (
+              <p
+                key={idx + tag}
+                className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]"
+              >
+                {tag}
+              </p>
+            ))}
+          </div>
+          <h1 className="mt-2 text-3xl font-semibold">
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque,
+            nam.
+          </h1>
+          <div className="mt-8 flex h-full flex-col gap-1 font-thin">
+            <div className="flex flex-row items-center gap-2">
+              <Clock className="h-5 w-5 fill-slate-400" />
+              <p>12 grudnia 2024r. 12:00 - 13 grudnia 2024r. 23:48</p>
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <Location className="h-5 w-5 fill-slate-400" />
+              <p>Wrocław, C-16 Politechnika Wrocławska, Polska</p>
+            </div>
+            <div className="flex flex-row gap-5">
+              <div className="flex flex-row items-center gap-2">
+                <QuestionCircle className="h-5 w-5 fill-orange-400" />
+                <span>60 zainteresowanych</span>
+              </div>
+              <div className="flex flex-row items-center gap-2">
+                <TickCircle className="h-5 w-5 fill-green-400" />
+                <span>20 bierze udział</span>
+              </div>
+            </div>
+            <div className="mt-5">
+              <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
+              <div className="ml-5 flex flex-col gap-1">
+                {MOCK_PARAMS &&
+                  Object.keys(MOCK_PARAMS).map((key, idx) => (
+                    <p key={idx + key}>
+                      <span className="mr-2 rounded-md bg-[#4b4e52] px-[5px] py-[1px]">
+                        {key}:
+                      </span>
+                      {MOCK_PARAMS[key]}
+                    </p>
+                  ))}
+              </div>
+            </div>
+          </div>
+          <div className="mt-8 flex items-center gap-2">
+            <div className="relative rounded-full bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-[2px]">
+              <img
+                src="https://avatars.githubusercontent.com/u/63869461?v=4"
+                alt="avatar"
+                className="relative z-10 h-10 w-10 rounded-full"
+              />
+            </div>
+            <p>Nazwa organizatora</p>
+          </div>
+          <div className="mt-3 text-xs font-thin text-[#ccc]">
+            <p>utworzono: 13 czerwca 2024r. 12:25</p>
+            <p>ostatnia edycja: 13 czerwca 2024r. 12:48</p>
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-5">
+          <div className="relative z-10 h-[50vh] w-full overflow-hidden rounded-lg bg-black">
+            <div
+              className="flex h-full w-full gap-0"
+              style={{ transform: `translateX(-${currentImageIdx * 100}%)` }}
+            >
+              {imgs.map((img, idx) => (
+                // eslint-disable-next-line @next/next/no-img-element
+                <div className="w-full flex-shrink-0" key={idx + img}>
+                  <img
+                    src={img}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    ref={currentImageIdx === idx ? imgRef : null}
+                  />
+                </div>
+              ))}
+            </div>
+            {currentImageIdx > 0 && (
+              <ArrowLeft
+                onClick={() => setCurrentImageIdx(currentImageIdx - 1)}
+                className="absolute left-5 top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2"
+              />
+            )}
+            {currentImageIdx < imgs.length - 1 && (
+              <ArrowRight
+                onClick={() => setCurrentImageIdx((idx) => idx + 1)}
+                className="absolute right-5 top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2"
+              />
+            )}
+            <canvas className="hidden" ref={canvasRef}></canvas>
+          </div>
+          <div className="relative z-10 flex flex-row justify-evenly gap-8">
+            {editPage ? (
+              <ButtonBase
+                text="edytuj"
+                onClick={handleRedirect}
+                className="w-full"
+              />
+            ) : (
+              <>
+                <ButtonBase
+                  text="dodaj do polubionych"
+                  onClick={() => {}}
+                  className="w-full font-semibold text-orange-400"
+                  background="hover:bg-[#0f0f0f] bg-black"
+                />
+                <ButtonBase
+                  text="biorę udział"
+                  onClick={() => {}}
+                  className="w-full font-semibold text-green-400"
+                  background="hover:bg-[#0f0f0f] bg-black"
+                />
+              </>
+            )}
+          </div>
+          <div className="relative">
+            <h3 className="font-semibold">Opis:</h3>
+            <p className="text-justify font-thin">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Necessitatibus aspernatur quibusdam saepe enim totam suscipit
+              tempore facere aut id sint ratione placeat, magni ipsa quo
+              assumenda odit atque omnis, sequi, impedit reiciendis. Provident
+              nobis quaerat maxime beatae sapiente. Placeat, obcaecati
+              doloremque laboriosam cumque, praesentium necessitatibus itaque
+              consequuntur ex dignissimos quam atque beatae impedit temporibus
+              dicta ab magnam dolorum corrupti sit enim! Ipsa, omnis nisi.
+            </p>
+          </div>
+          <div className="relative">
+            <h3 className="font-semibold">Komentarze:</h3>
+            <div className="flex flex-col gap-2">
+              <Comment />
+              <Comment />
+              <Comment />
+              <Comment />
+              <Comment />
+              <Comment />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventPage;
diff --git a/Client/reasn-client/apps/web/app/events/layout.tsx b/Client/reasn-client/apps/web/app/events/layout.tsx
new file mode 100644
index 00000000..c9ac1139
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/events/layout.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const EventLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex min-h-screen w-[90%] justify-between py-10 sm:w-3/4">
+      {children}
+    </section>
+  );
+};
+
+export default EventLayout;
diff --git a/Client/reasn-client/apps/web/app/events/new/page.tsx b/Client/reasn-client/apps/web/app/events/new/page.tsx
new file mode 100644
index 00000000..f21f820b
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/events/new/page.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import {
+  ButtonBase,
+  FloatingInput,
+  FloatingTextarea,
+  SearchMultiDropdown,
+} from "@reasn/ui/src/components/shared/form";
+import { ChangeEvent, useState } from "react";
+import { Clock, Location, Upload } from "@reasn/ui/src/icons";
+import { useRouter } from "next/navigation";
+import clsx from "clsx";
+import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { BaseInput } from "@reasn/ui/src/components/shared/form/Input";
+import { getStatusClass } from "@reasn/common/helpers/uiHelpers";
+
+const MOCK_TAGS = [
+  "abcd",
+  "efgh",
+  "ijkl",
+  "mnop",
+  "qrst",
+  "uvwx",
+  "yzab",
+  "cdef",
+  "ghij",
+  "dada",
+  "vvvv",
+  "bgbfgb",
+  "nfnfnf",
+  "mmjmjm",
+  ",lkyt",
+  "t554",
+  "fsdfs",
+  "hhhhh",
+  "fsf",
+  "u234ghhvwx",
+  "nh",
+  "sdfsf4",
+  "ses5",
+];
+
+const MOCK_PARAMS: { [key: string]: string } = {
+  abcd: "efgh",
+  ijkl: "mnop",
+  qrst: "uvwx",
+  yzab: "cdef",
+  ghij: "ijkl",
+  mnop: "qrst",
+  uvwx: "yzab",
+  cdef: "ghij",
+};
+
+const EventAddPage = () => {
+  const [status, setStatus] = useState<string>(EventStatus.PENDING_APPROVAL);
+
+  const [imgs, setImgs] = useState<string[]>([]);
+
+  const [tags, setTags] = useState<string[]>([]);
+
+  const [paramsKeys, setParamsKeys] = useState<string[]>([]);
+
+  const handleImageUpload = (
+    event: ChangeEvent<HTMLInputElement>,
+    idx: number,
+  ) => {
+    const file = event?.target?.files?.[0];
+    if (file) {
+      const fileURL = URL.createObjectURL(file);
+      setImgs((prevImgs) => {
+        const newImgs = [...prevImgs];
+        newImgs[idx] = fileURL;
+        return newImgs;
+      });
+    }
+  };
+
+  return (
+    <div className="relative flex w-full flex-col gap-5">
+      <div
+        className={clsx(
+          "absolute bottom-[50%] right-[-50%] z-0 h-[80%] w-[200%] rounded-full blur-3xl",
+          "bg-gradient-to-r to-[#4E4F75] opacity-20 duration-1000",
+          getStatusClass(status as EventStatus),
+        )}
+      ></div>
+      <div className="flex w-full flex-row flex-wrap justify-between gap-5 xl:flex-nowrap">
+        <div className="flex h-max min-h-[50vh] w-full flex-col justify-between rounded-lg bg-[#1E1F296d] p-5 backdrop-blur-lg xl:w-[25vw] xl:min-w-[25vw]">
+          <p
+            className={clsx(
+              "mb-2 font-bold uppercase",
+              getStatusClass(status as EventStatus),
+            )}
+          >
+            {status}
+          </p>
+          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+            <SearchMultiDropdown
+              label="Wyszukaj tagi"
+              options={MOCK_TAGS}
+              selectedOptions={tags}
+              setSelectedOptions={setTags}
+            />
+            <div className="mt-2 flex flex-wrap gap-2">
+              <h3 className="font-semibold">Wybrane tagi:</h3>
+              {!tags ||
+                (tags.length === 0 && <p className="text-[#cacaca]">brak</p>)}
+              {tags.map((tag, idx) => (
+                <p
+                  key={idx + tag}
+                  className="rounded-md bg-[#4E4F75] px-[5px] py-[1px]"
+                >
+                  {tag}
+                </p>
+              ))}
+            </div>
+          </div>
+          <div className="mt-10">
+            <FloatingTextarea
+              label="Tytuł"
+              name="description"
+              className="h-28 text-lg"
+            />
+          </div>
+          <div className="mt-8 flex h-full flex-col gap-8 font-thin">
+            <div className="flex flex-row items-center gap-2">
+              <Clock className="h-5 w-5 fill-slate-400" />
+              <FloatingInput
+                label="Data od"
+                type="date"
+                name="dateFrom"
+                className="grow"
+              />
+              <FloatingInput
+                label="Czas od"
+                type="time"
+                name="timeFrom"
+                className="grow"
+              />
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <Clock className="h-5 w-5 fill-slate-400" />
+              <FloatingInput
+                label="Data do"
+                type="date"
+                name="dateFrom"
+                className="grow"
+              />
+              <FloatingInput
+                label="Czas do"
+                type="time"
+                name="timeFrom"
+                className="grow"
+              />
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <Location className="h-5 w-5 fill-slate-400" />
+              <div className="flex w-full flex-wrap gap-8">
+                <FloatingInput
+                  label="Kraj"
+                  type="text"
+                  name="country"
+                  className="w-full"
+                />
+                <FloatingInput
+                  label="Miasto"
+                  type="text"
+                  name="city"
+                  className="w-full"
+                />
+                <FloatingInput
+                  label="Województwo"
+                  type="text"
+                  name="state"
+                  className="w-full"
+                />
+                <FloatingInput
+                  label="Ulica"
+                  type="text"
+                  name="street"
+                  className="w-full"
+                />
+              </div>
+            </div>
+            <div>
+              <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
+              <SearchMultiDropdown
+                label="Wyszukaj parametry"
+                options={Object.keys(MOCK_PARAMS)}
+                selectedOptions={paramsKeys}
+                setSelectedOptions={setParamsKeys}
+              />
+              <div className="ml-5 mt-2 flex flex-col gap-1">
+                <h3 className="font-semibold">Wybrane parametry:</h3>
+                {!paramsKeys ||
+                  (paramsKeys.length === 0 && (
+                    <p className="text-[#cacaca]">brak</p>
+                  ))}
+                {paramsKeys?.map((key, idx) => (
+                  <div
+                    key={idx + key}
+                    className="flex items-center justify-between"
+                  >
+                    <span className="mr-2 w-1/4 rounded-md bg-[#4E4F75] px-[5px] py-[1px]">
+                      {key}:
+                    </span>
+                    <BaseInput
+                      type="text"
+                      defaultValue={MOCK_PARAMS[key]}
+                      className="w-full"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-5">
+          <div className="relative z-10 grid h-[50vh] w-full grid-cols-2 grid-rows-2 gap-3 overflow-hidden rounded-lg">
+            {[0, 1, 2, 3].map((idx) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <div
+                className="group relative h-full w-full overflow-clip"
+                key={idx}
+              >
+                <div
+                  onClick={() => {
+                    const element = document?.querySelector(
+                      `input[name="img-${idx}"]`,
+                    );
+                    if (element instanceof HTMLInputElement) {
+                      element.click();
+                    }
+                  }}
+                  className="absolute z-20 flex h-full w-full cursor-pointer items-center justify-center bg-black opacity-0 duration-300 group-hover:opacity-50"
+                >
+                  <Upload className="h-10 w-10 fill-white" />
+                </div>
+                <input
+                  type="file"
+                  hidden
+                  name={`img-${idx}`}
+                  accept="image/png, image/jpeg"
+                  onChange={(e) => handleImageUpload(e, idx)}
+                />
+                {imgs[idx] ? (
+                  <img
+                    src={imgs[idx]}
+                    alt=""
+                    className="relative z-10 h-full w-full object-cover duration-300 group-hover:blur-[2px]"
+                  />
+                ) : (
+                  <div className="relative z-10 h-full w-full bg-[#1E1F29]"></div>
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="relative flex flex-col gap-8">
+            <div className="mt-8">
+              <FloatingTextarea label="Opis" name="comment" className="h-48" />
+            </div>
+            <div className="relative flex w-full flex-row justify-evenly gap-8">
+              <ButtonBase text="dodaj" onClick={() => {}} className="w-full" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventAddPage;
diff --git a/Client/reasn-client/apps/web/app/login/layout.tsx b/Client/reasn-client/apps/web/app/login/layout.tsx
index cdc8ea08..0534a232 100644
--- a/Client/reasn-client/apps/web/app/login/layout.tsx
+++ b/Client/reasn-client/apps/web/app/login/layout.tsx
@@ -11,7 +11,7 @@ const LoginLayout = ({
   };
 }) => {
   return (
-    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+    <section className="relative mx-auto flex h-screen w-[90%] flex-wrap justify-between py-10 lg:w-3/4">
       {children}
     </section>
   );
diff --git a/Client/reasn-client/apps/web/app/login/page.tsx b/Client/reasn-client/apps/web/app/login/page.tsx
index c4150fd4..c9e0f136 100644
--- a/Client/reasn-client/apps/web/app/login/page.tsx
+++ b/Client/reasn-client/apps/web/app/login/page.tsx
@@ -17,8 +17,8 @@ const LoginPage = () => {
 
   return (
     <>
-      <div className="flex w-1/2 items-center justify-center">
-        <form className="flex w-full flex-col gap-8" ref={formRef}>
+      <div className="relative z-10 flex w-full items-center justify-center sm:w-1/2">
+        <form className="flex w-full flex-col gap-2 sm:gap-8" ref={formRef}>
           <FloatingInput type="email" label="email" name="email" />
           <FloatingInput type="password" label="hasło" name="password" />
           <div className="flex justify-end gap-2 text-sm">
@@ -29,8 +29,8 @@ const LoginPage = () => {
           </div>
         </form>
       </div>
-      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
-        <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+      <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
+        <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
           miło, że do nas wracasz
         </p>
         <ButtonBase text={"zaloguj"} onClick={handleFormSubmit} />
diff --git a/Client/reasn-client/apps/web/app/register/layout.tsx b/Client/reasn-client/apps/web/app/register/layout.tsx
index 2bff494a..c76dceea 100644
--- a/Client/reasn-client/apps/web/app/register/layout.tsx
+++ b/Client/reasn-client/apps/web/app/register/layout.tsx
@@ -11,7 +11,7 @@ const RegisterLayout = ({
   };
 }) => {
   return (
-    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+    <section className="relative mx-auto flex h-screen w-[90%] flex-wrap justify-between py-10 lg:w-3/4">
       {children}
     </section>
   );
diff --git a/Client/reasn-client/apps/web/app/register/organizer/page.tsx b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
index 2b5807b9..be2f7ce2 100644
--- a/Client/reasn-client/apps/web/app/register/organizer/page.tsx
+++ b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
@@ -17,7 +17,7 @@ const RegisterOrganizer = () => {
 
   return (
     <>
-      <div className="flex w-1/2 items-center justify-center">
+      <div className="relative z-10 flex w-full items-center justify-center sm:w-1/2">
         <form className="flex w-full flex-col gap-8" ref={formRef}>
           {currentStep === 1 && (
             <>
@@ -49,14 +49,14 @@ const RegisterOrganizer = () => {
           )}
         </form>
       </div>
-      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
+      <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
         {currentStep === 1 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             to jak, zorganizujesz nam coś?
           </p>
         )}
         {currentStep === 2 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             gdzie możemy cię znaleźć?
           </p>
         )}
diff --git a/Client/reasn-client/apps/web/app/register/page.tsx b/Client/reasn-client/apps/web/app/register/page.tsx
index 05c14ae0..b7d2b046 100644
--- a/Client/reasn-client/apps/web/app/register/page.tsx
+++ b/Client/reasn-client/apps/web/app/register/page.tsx
@@ -9,9 +9,9 @@ const RegisterMiddleware = () => {
   return (
     <div className="flex h-4/5 w-full flex-col items-center justify-evenly gap-8">
       <h2 className="w-full text-5xl font-bold">kim jesteś?</h2>
-      <div className="flex w-full gap-8">
+      <div className="flex w-full flex-col gap-8 sm:flex-row">
         <div
-          className="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10"
+          className="group flex h-80 w-full cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10 sm:w-[35%]"
           onClick={() => router.push("/register/organizer")}
         >
           <div className="h-4/5 w-full rounded-xl border border-[#3E3E44] duration-500 group-hover:h-3/4"></div>
@@ -20,10 +20,10 @@ const RegisterMiddleware = () => {
           </p>
         </div>
         <div
-          className="group relative flex h-80 w-[60%] cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10"
+          className="group relative flex h-80 w-full cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10 sm:w-[60%]"
           onClick={() => router.push("/register/user")}
         >
-          <p className="z-10 text-6xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl">
+          <p className="z-10 text-5xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl sm:text-6xl">
             Uczestnik
           </p>
           <div className="absolute right-0 top-1/2 h-4/5 w-3/5 -translate-y-1/2 rounded-l-xl bg-black duration-500 group-hover:h-full group-hover:w-2/3"></div>
diff --git a/Client/reasn-client/apps/web/app/register/user/page.tsx b/Client/reasn-client/apps/web/app/register/user/page.tsx
index 79131460..78431412 100644
--- a/Client/reasn-client/apps/web/app/register/user/page.tsx
+++ b/Client/reasn-client/apps/web/app/register/user/page.tsx
@@ -17,7 +17,7 @@ const RegisterUser = () => {
 
   return (
     <>
-      <div className="flex w-1/2 items-center justify-center">
+      <div className="flex w-full items-center justify-center sm:w-1/2">
         <form className="flex w-full flex-col gap-8" ref={formRef}>
           {currentStep === 1 && (
             <>
@@ -49,14 +49,14 @@ const RegisterUser = () => {
           )}
         </form>
       </div>
-      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
+      <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
         {currentStep === 1 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             znalazłeś już swój powód do spotkań?
           </p>
         )}
         {currentStep === 2 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             gdzie powinniśmy cię szukać?
           </p>
         )}
diff --git a/Client/reasn-client/jest.config.ts b/Client/reasn-client/jest.config.ts
index 37743456..c2672858 100644
--- a/Client/reasn-client/jest.config.ts
+++ b/Client/reasn-client/jest.config.ts
@@ -94,6 +94,7 @@ const config: JestConfigWithTsJest = {
     "^@reasn/common/interfaces/(.*)$":
       "<rootDir>/packages/common/interfaces/$1",
     "^@reasn/common/errors/(.*)$": "<rootDir>/packages/common/errors/$1",
+    "^@reasn/common/hooks/(.*)$": "<rootDir>/packages/common/hooks/$1",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
diff --git a/Client/reasn-client/packages/common/helpers/uiHelpers.ts b/Client/reasn-client/packages/common/helpers/uiHelpers.ts
new file mode 100644
index 00000000..9978becc
--- /dev/null
+++ b/Client/reasn-client/packages/common/helpers/uiHelpers.ts
@@ -0,0 +1,20 @@
+import { EventStatus } from "@reasn/common/enums/modelsEnums";
+
+export const getStatusClass = (status: EventStatus) => {
+  switch (status) {
+    case EventStatus.APPROVED:
+      return "from-green-400 text-green-400";
+    case EventStatus.PENDING_APPROVAL:
+      return "from-orange-400 text-orange-400";
+    case EventStatus.REJECTED:
+      return "from-red-400 text-red-400";
+    case EventStatus.COMPLETED:
+      return "from-blue-400 text-blue-400";
+    case EventStatus.ONGOING:
+      return "from-yellow-400 text-yellow-400";
+    case EventStatus.CANCELLED:
+      return "from-gray-400 text-gray-400";
+    default:
+      return "from-gray-400 text-gray-400";
+  }
+};
diff --git a/Client/reasn-client/packages/common/hooks/useColorWorker.ts b/Client/reasn-client/packages/common/hooks/useColorWorker.ts
new file mode 100644
index 00000000..2ea3454e
--- /dev/null
+++ b/Client/reasn-client/packages/common/hooks/useColorWorker.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+function useColorWorker(imageData: Uint8ClampedArray | null | undefined) {
+  const [dominantColors, setDominantColors] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!imageData) return;
+
+    const worker = new Worker(
+      new URL("../workers/colorWorker.ts", import.meta.url),
+    );
+
+    worker.onmessage = (event) => {
+      setDominantColors(event.data.dominantColors);
+      worker.terminate();
+    };
+
+    worker.postMessage({ imageData });
+
+    return () => {
+      worker.terminate();
+    };
+  }, [imageData]);
+
+  return dominantColors;
+}
+
+export default useColorWorker;
diff --git a/Client/reasn-client/packages/common/workers/colorWorker.ts b/Client/reasn-client/packages/common/workers/colorWorker.ts
new file mode 100644
index 00000000..c2347685
--- /dev/null
+++ b/Client/reasn-client/packages/common/workers/colorWorker.ts
@@ -0,0 +1,56 @@
+self.onmessage = function (event) {
+  const { imageData } = event.data;
+
+  const colorDistance = (color1: string, color2: string): number => {
+    const [r1, g1, b1] = color1.split(",").map(Number);
+    const [r2, g2, b2] = color2.split(",").map(Number);
+    return Math.sqrt((r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2);
+  };
+
+  const colorCount: { [key: string]: number } = {};
+  const incrementValue = 120;
+
+  for (let i = 0; i < imageData.length; i += incrementValue) {
+    const r = imageData[i];
+    const g = imageData[i + 1];
+    const b = imageData[i + 2];
+
+    const color = `${r},${g},${b}`;
+    if (colorCount[color]) {
+      colorCount[color]++;
+    } else {
+      colorCount[color] = 1;
+    }
+  }
+
+  let sortedColors = Object.entries(colorCount).sort(
+    ([, countA], [, countB]) => countB - countA,
+  );
+
+  sortedColors = sortedColors.filter(([color]) => {
+    const [r, g, b] = color.split(",").map(Number);
+    return (r > 5 || g > 5 || b > 5) && (r < 250 || g < 250 || b < 250);
+  });
+
+  sortedColors = sortedColors.reduce(
+    (acc: [string, number][], [color, count]) => {
+      const similarColor = acc.find(
+        ([accColor]) => colorDistance(color, accColor) < 10,
+      );
+
+      if (!similarColor) {
+        acc.push([color, count]);
+      } else {
+        similarColor[1] += count;
+      }
+
+      return acc;
+    },
+    [],
+  );
+
+  const dominantColors = sortedColors.slice(0, 10).map(([color]) => color);
+  postMessage({ dominantColors });
+};
+
+export {};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
index e00068bd..56b8ca47 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
@@ -1,6 +1,7 @@
 import React from "react";
+import { useRouter } from "next/navigation";
 
-const MOCK_IMG_URL =
+export const MOCK_IMG_URL =
   "https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1200,h_630/w_80,x_15,y_15,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/tsah7c9evnal289z5fig/IMG%20Worlds%20of%20Adventure%20Admission%20Ticket%20in%20Dubai%20-%20Klook.jpg";
 
 export enum CardVariant {
@@ -16,8 +17,15 @@ export interface CardProps {
 
 export const Card = (props: Readonly<CardProps>) => {
   const { variant, event } = props;
+  const router = useRouter();
+
+  const handleCardClick = () => {
+    console.log("clicked");
+    router.push(`/events/${event}`);
+  };
+
   return (
-    <div>
+    <div onClick={handleCardClick}>
       {variant === CardVariant.Big && <CardBig event={event} />}
       {variant === CardVariant.Tile && <CardTile event={event} />}
       {variant === CardVariant.List && <CardList event={event} />}
@@ -27,8 +35,12 @@ export const Card = (props: Readonly<CardProps>) => {
 
 const CardBig = ({ event }: { event: string }) => {
   return (
-    <div className="relative h-[30vh] w-[30vw] overflow-hidden rounded-3xl">
-      <img src={MOCK_IMG_URL} alt="" className="absolute left-0 top-0 w-full" />
+    <div className="relative min-h-[30vh] min-w-[30vw] cursor-pointer overflow-hidden rounded-3xl">
+      <img
+        src={MOCK_IMG_URL}
+        alt=""
+        className="absolute left-0 top-0 h-full w-full object-cover"
+      />
       <div className="relative flex h-[45%] w-full flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex gap-2 text-xs text-[#cacaca]">
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
@@ -41,10 +53,16 @@ const CardBig = ({ event }: { event: string }) => {
         </h2>
       </div>
       <div className="absolute right-4 top-0 flex h-[45%] flex-col justify-center gap-2 py-4">
-        <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]">
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]"
+        >
           +
         </span>
-        <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]">
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]"
+        >
           ?
         </span>
       </div>
@@ -54,7 +72,7 @@ const CardBig = ({ event }: { event: string }) => {
 
 const CardTile = ({ event }: { event: string }) => {
   return (
-    <div className="group relative h-64 w-48 overflow-clip rounded-3xl">
+    <div className="group relative h-64 w-48 cursor-pointer overflow-clip rounded-3xl">
       <img
         src={MOCK_IMG_URL}
         alt=""
@@ -72,10 +90,16 @@ const CardTile = ({ event }: { event: string }) => {
         </h2>
       </div>
       <div className="absolute bottom-0 left-0 hidden w-full flex-row justify-center gap-2 bg-[#232326ee] py-2 group-hover:flex">
-        <span className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-1 text-sm font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]">
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-1 text-sm font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]"
+        >
           +
         </span>
-        <span className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-1 text-sm font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]">
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-1 text-sm font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]"
+        >
           ?
         </span>
       </div>
@@ -85,7 +109,7 @@ const CardTile = ({ event }: { event: string }) => {
 
 const CardList = ({ event }: { event: string }) => {
   return (
-    <div className="group relative h-36 w-full overflow-hidden rounded-3xl">
+    <div className="group relative h-36 w-full cursor-pointer overflow-hidden rounded-3xl">
       <img src={MOCK_IMG_URL} alt="" className="absolute left-0 top-0 w-full" />
       <div className="relative flex h-full w-2/3 flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex gap-2 text-xs text-[#cacaca]">
@@ -103,10 +127,16 @@ const CardList = ({ event }: { event: string }) => {
         </p>
       </div>
       <div className="absolute right-0 top-0 hidden h-full flex-col justify-center gap-2 bg-[#232326ee] px-4 group-hover:flex">
-        <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]">
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]"
+        >
           +
         </span>
-        <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]">
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]"
+        >
           ?
         </span>
       </div>
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
new file mode 100644
index 00000000..f10838a2
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { CommentDto, CommentDtoMapper } from "@reasn/common/models/CommentDto";
+
+interface CommentProps {
+  comment: CommentDto;
+}
+
+export const Comment = () => {
+  const comment = CommentDtoMapper.fromObject({
+    EventId: 1,
+    Content:
+      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta quidem sapiente odit maxime. Officiis, error laborum. Voluptatem quibusdam mollitia possimus?",
+    CreatedAt: new Date(),
+    UserId: 1,
+  });
+
+  return (
+    <div className="flex flex-col gap-4 rounded-md bg-[#4b4e526d] p-2">
+      <p className="font-thin">{comment.Content}</p>
+      <div className="flex items-center gap-2">
+        <div className="relative rounded-full bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-[2px]">
+          <img
+            src="https://avatars.githubusercontent.com/u/63869461?v=4"
+            alt="avatar"
+            className="relative z-10 h-6 w-6 rounded-full"
+          />
+        </div>
+        <p>username</p>
+        <p className="ml-auto text-xs font-thin text-[#ccc]">
+          13 czerwca 2024r. 12:25
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
index b24da98b..31ca0eb6 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
@@ -6,17 +6,20 @@ import React from "react";
 interface ButtonProps {
   text: string;
   className?: string;
+  background?: string;
   onClick: () => void;
 }
 
 export const ButtonBase = (props: ButtonProps) => {
-  const { text, className, onClick } = props;
+  const { text, className, background, onClick } = props;
   return (
     <button
       onClick={onClick}
       className={clsx(
-        "w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2",
         className,
+        "w-36 rounded-2xl px-4 py-2",
+        { [background as string]: background },
+        { "bg-gradient-to-r from-[#32346A] to-[#4E4F75]": !background },
       )}
     >
       {text}
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
new file mode 100644
index 00000000..c35de5ab
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useRef, useState } from "react";
+import { FloatingInput } from "./Input";
+import clsx from "clsx";
+import { CaretDown, CaretUp } from "../../../icons";
+
+interface DropdownProps {
+  label: string;
+  options: string[];
+}
+
+interface SingleDropdownProps extends DropdownProps {
+  selectedOptionClass?: string;
+  selectedOption: string;
+  setSelectedOption: (selectedOption: string) => void;
+}
+
+interface MultiDropdownProps extends DropdownProps {
+  selectedOptions: string[];
+  setSelectedOptions: (selectedOptions: string[]) => void;
+}
+
+export const SearchMultiDropdown = (props: MultiDropdownProps) => {
+  const { label, options, selectedOptions, setSelectedOptions } = props;
+
+  const [search, setSearch] = useState("");
+
+  const filteredOptions = options.filter(
+    (option) =>
+      option.toLowerCase().includes(search.toLowerCase()) &&
+      !selectedOptions.includes(option),
+  );
+
+  const handleSelectOption = (option: string) => {
+    if (selectedOptions.includes(option)) {
+      setSelectedOptions(
+        selectedOptions.filter((selectedOption) => selectedOption !== option),
+      );
+    } else {
+      setSelectedOptions([...selectedOptions, option]);
+    }
+  };
+
+  return (
+    <div className="mt-8 flex w-full flex-col gap-2">
+      <FloatingInput
+        type="text"
+        label={label}
+        className="w-full rounded-b-none"
+        defaultValue={search}
+        onChange={setSearch}
+      />
+      <div className="flex h-16 flex-wrap justify-start gap-2 overflow-auto rounded-b-lg bg-[#232327] p-2 text-xs">
+        {selectedOptions.concat(filteredOptions).map((option) => (
+          <p
+            key={option}
+            className={clsx(
+              "h-5 flex-shrink-0 cursor-pointer rounded-md px-[5px] py-[1px]",
+              {
+                "bg-[#4E4F75]": selectedOptions.includes(option),
+              },
+              {
+                "bg-[#4b4e52]": !selectedOptions.includes(option),
+              },
+            )}
+            onClick={() => handleSelectOption(option)}
+          >
+            {option}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const SingleDropdown = (props: SingleDropdownProps) => {
+  const {
+    label,
+    options,
+    selectedOption,
+    selectedOptionClass,
+    setSelectedOption,
+  } = props;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const ref = useRef(null);
+
+  const handleSelectOption = (option: string) => {
+    setSelectedOption(option);
+  };
+
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      let currentRef = ref.current ? (ref.current as Node) : undefined;
+      if (!currentRef?.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full cursor-pointer flex-col gap-2 rounded-lg bg-[#232327]",
+        { "rounded-b-none": isExpanded },
+      )}
+      onClick={toggleExpanded}
+      ref={ref}
+    >
+      <div
+        className={clsx(
+          "flex w-full items-center justify-between p-2",
+          selectedOptionClass ?? "",
+        )}
+      >
+        {selectedOption || "Select an option"}
+        {isExpanded ? (
+          <CaretUp className="ml-2 h-4 w-4 fill-white" />
+        ) : (
+          <CaretDown className="ml-2 h-4 w-4 fill-white" />
+        )}
+      </div>
+      <div
+        className={clsx(
+          "absolute top-[100%] z-20 h-24 w-full flex-col justify-start overflow-auto rounded-b-lg bg-[#232327] text-xs",
+          { hidden: !isExpanded },
+          { flex: isExpanded },
+        )}
+      >
+        {options.map((option) => (
+          <p
+            key={option}
+            className={clsx(
+              "w-full p-2",
+              {
+                "bg-[#4E4F75]": selectedOption === option,
+              },
+              {
+                "bg-[#4b4e52] hover:bg-[#4E4F75]": selectedOption !== option,
+              },
+            )}
+            onClick={() => handleSelectOption(option)}
+          >
+            {option}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
index dcd63bff..de81088c 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
@@ -7,14 +7,26 @@ interface InputProps {
   type: string;
   label?: string;
   name?: string;
+  defaultValue?: string;
+  className?: string;
+  onChange?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
 }
 
 export const FloatingInput = (props: InputProps) => {
+  const {
+    label,
+    type,
+    name,
+    defaultValue,
+    className,
+    onFocus,
+    onBlur,
+    onChange,
+  } = props;
   const [isFocused, setIsFocused] = useState(false);
-  const [isFilled, setIsFilled] = useState(false);
-  const { label, type, name, onFocus, onBlur } = props;
+  const [isFilled, setIsFilled] = useState(!!defaultValue);
 
   const handleFocus = () => {
     onFocus?.();
@@ -28,15 +40,25 @@ export const FloatingInput = (props: InputProps) => {
 
   return (
     <div
-      className={clsx("relative rounded-xl bg-[#232327] p-1", {
-        "bg-gradient-to-r from-[#32346A] to-[#4E4F75]": isFocused,
-      })}
+      className={clsx(
+        "relative rounded-xl bg-[#232327] p-1",
+        {
+          "bg-gradient-to-r from-[#32346A] to-[#4E4F75]": isFocused,
+        },
+        className,
+      )}
     >
       <label
         className={clsx(
-          "absolute left-3 transition-all duration-300",
-          { "top-[-50%] text-xs": isFocused || isFilled },
-          { "top-3 text-base": !isFocused && !isFilled },
+          "pointer-events-none absolute left-3 transition-all duration-300",
+          {
+            "top-[-1.5rem] text-xs":
+              isFocused || isFilled || ["date", "time"].includes(type),
+          },
+          {
+            "top-[20%] text-base":
+              !isFocused && !isFilled && !["date", "time"].includes(type),
+          },
         )}
       >
         {label ?? ""}
@@ -48,7 +70,42 @@ export const FloatingInput = (props: InputProps) => {
         className="h-full w-full rounded-lg bg-[#232327] p-2 focus:outline-none"
         onFocus={handleFocus}
         onBlur={handleBlur}
-        onChange={(e) => setIsFilled(!!e.target.value)}
+        onChange={(e) => {
+          setIsFilled(!!e.target.value);
+          onChange?.(e.target.value);
+        }}
+        defaultValue={defaultValue}
+      />
+    </div>
+  );
+};
+
+export const BaseInput = (props: InputProps) => {
+  const {
+    label,
+    type,
+    name,
+    defaultValue,
+    className,
+    onFocus,
+    onBlur,
+    onChange,
+  } = props;
+
+  return (
+    <div className={className}>
+      <input
+        type={type}
+        name={name}
+        id={name}
+        className="h-full w-full rounded-lg bg-[#232327] p-2 focus:outline-none"
+        onFocus={() => onFocus?.()}
+        onBlur={() => onBlur?.()}
+        onChange={(e) => {
+          onChange?.(e.target.value);
+        }}
+        defaultValue={defaultValue}
+        placeholder={label}
       />
     </div>
   );
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Textarea.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Textarea.tsx
new file mode 100644
index 00000000..a6409c20
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Textarea.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import clsx from "clsx";
+import React, { useState } from "react";
+
+interface InputProps {
+  label?: string;
+  name?: string;
+  defaultValue?: string;
+  className?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const FloatingTextarea = (props: InputProps) => {
+  const { label, name, defaultValue, className, onFocus, onBlur } = props;
+  const [isFocused, setIsFocused] = useState(false);
+  const [isFilled, setIsFilled] = useState(!!defaultValue);
+
+  const handleFocus = () => {
+    onFocus?.();
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    onBlur?.();
+    setIsFocused(false);
+  };
+
+  return (
+    <div
+      className={clsx(
+        "relative rounded-xl bg-[#232327] p-1",
+        {
+          "bg-gradient-to-r from-[#32346A] to-[#4E4F75]": isFocused,
+        },
+        className,
+      )}
+    >
+      <label
+        className={clsx(
+          "absolute left-3 transition-all duration-300",
+          { "top-[-1.5rem] text-xs": isFocused || isFilled },
+          { "top-3 text-base": !isFocused && !isFilled },
+        )}
+      >
+        {label ?? ""}
+      </label>
+      <textarea
+        name={name}
+        id={name}
+        className="h-full w-full resize-none rounded-lg bg-[#232327] p-2 focus:outline-none"
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={(e) => setIsFilled(!!e.target.value)}
+        defaultValue={defaultValue}
+      />
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/index.tsx
index 6f5bc46f..4d9f92f1 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/index.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/index.tsx
@@ -1,2 +1,4 @@
 export { ButtonBase } from "./Button";
 export { FloatingInput } from "./Input";
+export { FloatingTextarea } from "./Textarea";
+export { SearchMultiDropdown, SingleDropdown } from "./Dropdown";
diff --git a/Client/reasn-client/packages/ui/src/components/shared/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
index 8ccb7bc1..3bb07c3c 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/index.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
@@ -2,3 +2,4 @@ export { Card, CardVariant } from "./Card";
 export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
 export { Interest } from "./Interest";
+export { Comment } from "./Comment";
diff --git a/Client/reasn-client/packages/ui/src/components/web/main/CTASection.tsx b/Client/reasn-client/packages/ui/src/components/web/main/CTASection.tsx
index 1445948b..877d5c26 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/CTASection.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/CTASection.tsx
@@ -2,17 +2,17 @@ import React from "react";
 
 export const CTASection = () => {
   return (
-    <div className="mx-auto flex w-[55%] flex-wrap justify-between gap-5 py-36">
+    <div className="mx-auto flex w-[80%] flex-col flex-wrap justify-between gap-5 py-36 sm:flex-row lg:w-[55%]">
       <h3 className="w-full text-xl font-semibold">
         Nasze eventy, Twój powód do spotkań.
       </h3>
-      <div className="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10">
+      <div className="group flex h-80 w-full cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10 sm:w-[35%]">
         <div className="h-4/5 w-full rounded-xl border border-[#3E3E44] duration-500 group-hover:h-3/4"></div>
         <p className="text-lg font-semibold duration-500 group-hover:text-3xl">
           Dodaj swój event
         </p>
       </div>
-      <div className="group relative flex h-80 w-[60%] cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10">
+      <div className="group relative flex h-80 w-full cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10 sm:w-[60%]">
         <p className="z-10 text-6xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl">
           Zobacz <br /> istniejące eventy
         </p>
diff --git a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
index fcba4492..a6424a94 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
@@ -4,8 +4,8 @@ import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 
 export const HeroSection = () => {
   return (
-    <section className="flex h-[50vh] w-full items-center justify-center gap-24">
-      <div className="relative z-10 h-1/3 w-fit">
+    <section className="flex h-[50vh] w-full flex-col items-center justify-center gap-[10%] lg:flex-row">
+      <div className="relative z-10 hidden h-1/3 w-fit lg:block">
         <div className='absolute top-0 h-1.5 w-2/3 rounded-lg bg-gradient-to-r from-[#FF6363] to-[#1E34FF] content-[""]'></div>
         <Fire
           className="absolute right-0 top-0 h-14 w-14 translate-y-[-50%] rotate-[16deg]"
@@ -18,7 +18,7 @@ export const HeroSection = () => {
       </div>
       <div className="relative">
         <div className='absolute right-[-25%] top-[-50%] z-0 h-[200%] w-[150%] rounded-full bg-gradient-to-r from-[#FF6363] to-[#1E34FF] opacity-5 blur-3xl content-[""]'></div>
-        <Card variant={CardVariant.Big} event={"abcd"} />
+        <Card variant={CardVariant.Big} event={"edit"} />
       </div>
     </section>
   );
diff --git a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
index 69024f10..380fbec1 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
@@ -14,7 +14,7 @@ export const QuickFilters = () => {
 
   return (
     <div>
-      <div className="flex w-full gap-10 overflow-x-clip bg-[#1E1F29] px-10 py-8">
+      <div className="flex w-full gap-10 overflow-x-auto bg-[#1E1F29] px-10 py-8">
         <QuickFilterButton
           text="Dziś"
           onClick={() => setSelectedFilter("Today")}
@@ -51,11 +51,7 @@ export const QuickFilters = () => {
           selected={selectedFilter === "Remote"}
         />
       </div>
-      <div className="flex flex-wrap gap-10 p-10">
-        <Card variant={CardVariant.Tile} event="Abc" />
-        <Card variant={CardVariant.Tile} event="Abc" />
-        <Card variant={CardVariant.Tile} event="Abc" />
-        <Card variant={CardVariant.Tile} event="Abc" />
+      <div className="grid grid-cols-1 place-items-center gap-10 p-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />
diff --git a/Client/reasn-client/packages/ui/src/icons/ArrowLeft.tsx b/Client/reasn-client/packages/ui/src/icons/ArrowLeft.tsx
new file mode 100644
index 00000000..cce8a496
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/ArrowLeft.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+export const ArrowLeft = (props: IconProps) => {
+  const { className, colors, gradientTransform, onClick } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+      onClick={onClick}
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/ArrowRight.tsx b/Client/reasn-client/packages/ui/src/icons/ArrowRight.tsx
new file mode 100644
index 00000000..26f7a8f1
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/ArrowRight.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+export const ArrowRight = (props: IconProps) => {
+  const { className, colors, gradientTransform, onClick } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+      onClick={onClick}
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/CaretDown.tsx b/Client/reasn-client/packages/ui/src/icons/CaretDown.tsx
new file mode 100644
index 00000000..c99697c4
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/CaretDown.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const CaretDown = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M6.102 8c-1.074 0-1.648 1.265-.94 2.073l5.521 6.31a1.75 1.75 0 0 0 2.634 0l5.522-6.31c.707-.808.133-2.073-.94-2.073H6.101Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/CaretUp.tsx b/Client/reasn-client/packages/ui/src/icons/CaretUp.tsx
new file mode 100644
index 00000000..44569649
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/CaretUp.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const CaretUp = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M6.102 16.981c-1.074 0-1.648-1.265-.94-2.073l5.521-6.31a1.75 1.75 0 0 1 2.634 0l5.522 6.31c.707.809.133 2.073-.94 2.073H6.101Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/Clock.tsx b/Client/reasn-client/packages/ui/src/icons/Clock.tsx
new file mode 100644
index 00000000..0612b683
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/Clock.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Clock = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M15.25 13.5h-4a.75.75 0 0 1-.75-.75v-6a.75.75 0 0 1 1.5 0V12h3.25a.75.75 0 0 1 0 1.5ZM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/IconProps.ts b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
index edcc6a2d..15c96d35 100644
--- a/Client/reasn-client/packages/ui/src/icons/IconProps.ts
+++ b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
@@ -2,4 +2,5 @@ type IconProps = {
   className?: string;
   colors?: string[];
   gradientTransform?: string;
+  onClick?: () => void;
 };
diff --git a/Client/reasn-client/packages/ui/src/icons/Location.tsx b/Client/reasn-client/packages/ui/src/icons/Location.tsx
new file mode 100644
index 00000000..8c70c1bb
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/Location.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Location = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="m18.157 16.882-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 1 1 12.314 0ZM14.5 11a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/QuestionCircle.tsx b/Client/reasn-client/packages/ui/src/icons/QuestionCircle.tsx
new file mode 100644
index 00000000..2be6d984
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/QuestionCircle.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const QuestionCircle = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8.75A2.75 2.75 0 0 0 9.25 9.5a.75.75 0 0 0 1.493.102l.007-.102a1.25 1.25 0 1 1 2.5 0c0 .539-.135.805-.645 1.332l-.135.138c-.878.878-1.22 1.447-1.22 2.53a.75.75 0 0 0 1.5 0c0-.539.135-.805.645-1.332l.135-.138c.878-.878 1.22-1.447 1.22-2.53A2.75 2.75 0 0 0 12 6.75Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/TickCircle.tsx b/Client/reasn-client/packages/ui/src/icons/TickCircle.tsx
new file mode 100644
index 00000000..14e92069
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/TickCircle.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const TickCircle = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/Upload.tsx b/Client/reasn-client/packages/ui/src/icons/Upload.tsx
new file mode 100644
index 00000000..c052b42b
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/Upload.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Upload = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M5.25 3.495h13.498a.75.75 0 0 0 .101-1.493l-.101-.007H5.25a.75.75 0 0 0-.102 1.493l.102.007Zm6.633 18.498L12 22a1 1 0 0 0 .993-.884L13 21V8.41l3.294 3.292a1 1 0 0 0 1.32.083l.094-.083a1 1 0 0 0 .083-1.32l-.083-.094-4.997-4.997a1 1 0 0 0-1.32-.083l-.094.083-5.004 4.996a1 1 0 0 0 1.32 1.499l.094-.083L11 8.415V21a1 1 0 0 0 .883.993Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/index.tsx b/Client/reasn-client/packages/ui/src/icons/index.tsx
index 3ce9045c..5cc581b4 100644
--- a/Client/reasn-client/packages/ui/src/icons/index.tsx
+++ b/Client/reasn-client/packages/ui/src/icons/index.tsx
@@ -1 +1,10 @@
 export { Fire } from "./Fire";
+export { Clock } from "./Clock";
+export { Location } from "./Location";
+export { QuestionCircle } from "./QuestionCircle";
+export { TickCircle } from "./TickCircle";
+export { ArrowLeft } from "./ArrowLeft";
+export { ArrowRight } from "./ArrowRight";
+export { Upload } from "./Upload";
+export { CaretDown } from "./CaretDown";
+export { CaretUp } from "./CaretUp";
diff --git a/Client/reasn-client/packages/ui/src/styles.css b/Client/reasn-client/packages/ui/src/styles.css
index bd6213e1..214d4f0b 100644
--- a/Client/reasn-client/packages/ui/src/styles.css
+++ b/Client/reasn-client/packages/ui/src/styles.css
@@ -1,3 +1,31 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+::-webkit-scrollbar {
+    width: 15px;
+}
+
+::-webkit-scrollbar-track {
+    background: black;
+    border-radius: 15px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #4E4F75;
+    border-radius: 10px;
+    border: none;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #3a3b57;
+    transition-duration: 500ms;
+}
+
+* {
+    scrollbar-width: 15px;
+}
+
+body {
+    -ms-overflow-style: none;
+}
\ No newline at end of file
diff --git a/Client/reasn-client/turbo.json b/Client/reasn-client/turbo.json
index 39652793..0bea19a1 100644
--- a/Client/reasn-client/turbo.json
+++ b/Client/reasn-client/turbo.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalDependencies": ["**/.env.*local"],
-  "pipeline": {
+  "tasks": {
     "build": {
       "outputs": ["dist/**", ".next/**", "!.next/cache/**"],
       "dependsOn": ["^build"]

From a1b88eb00065ca070a8d0855a0a0b4873b62f0c0 Mon Sep 17 00:00:00 2001
From: Dawid Machoczek <Raczuekk@gmail.com>
Date: Sat, 22 Jun 2024 22:17:16 +0200
Subject: [PATCH 04/13] [RSN-66] Create services to use backend (#66)

---
 Client/reasn-client/.husky/pre-commit         |   2 +-
 Client/reasn-client/apps/web/lib/request.ts   |  79 ++++++++
 Client/reasn-client/apps/web/lib/session.ts   |  51 +++++
 Client/reasn-client/apps/web/lib/token.ts     |  23 +++
 Client/reasn-client/apps/web/package.json     |   3 +
 Client/reasn-client/apps/web/services/auth.ts |  34 ++++
 .../reasn-client/apps/web/services/event.ts   | 181 ++++++++++++++++++
 Client/reasn-client/apps/web/services/user.ts | 174 +++++++++++++++++
 Client/reasn-client/apps/web/tsconfig.json    |   6 +-
 .../{models => schemas}/AddressDto.test.ts    |   7 +-
 .../{models => schemas}/CommentDto.test.ts    |   7 +-
 .../{models => schemas}/EventDto.test.ts      |   8 +-
 .../{models => schemas}/ImageDto.test.ts      |   6 +-
 .../{models => schemas}/InterestDto.test.ts   |   4 +-
 .../{models => schemas}/ParameterDto.test.ts  |   4 +-
 .../ParticipantDto.test.ts                    |  70 +++----
 .../{models => schemas}/TagDto.test.ts        |   4 +-
 .../{models => schemas}/UserDto.test.ts       |  62 +++++-
 .../UserInterestDto.test.ts                   |   6 +-
 .../__tests__/services/apiServices.test.ts    |  14 +-
 .../reasn-client/packages/common/package.json |  15 +-
 .../enums/schemasEnums.ts}                    |   0
 .../common/{ => src}/enums/serviceEnums.ts    |   0
 .../{ => src}/errors/ApiAuthorizationError.ts |   0
 .../{ => src}/errors/ApiConnectionError.ts    |   0
 .../{ => src}/errors/ModelMappingError.ts     |   0
 .../common/{ => src}/interfaces/AuthData.ts   |   2 +-
 .../{models => src/schemas}/AddressDto.ts     |   6 +-
 .../{models => src/schemas}/CommentDto.ts     |   2 +-
 .../{models => src/schemas}/EventDto.ts       |   6 +-
 .../common/src/schemas/EventRequest.ts        |  26 +++
 .../common/src/schemas/EventResponse.ts       |  79 ++++++++
 .../{models => src/schemas}/ImageDto.ts       |   4 +-
 .../{models => src/schemas}/InterestDto.ts    |   2 +-
 .../common/src/schemas/LoginRequest.ts        |  37 ++++
 .../{models => src/schemas}/ParameterDto.ts   |   2 +-
 .../{models => src/schemas}/ParticipantDto.ts |   8 +-
 .../common/src/schemas/RegisterRequest.ts     |  58 ++++++
 .../common/{models => src/schemas}/TagDto.ts  |   2 +-
 .../common/src/schemas/TokenPayload.ts        |  38 ++++
 .../common/{models => src/schemas}/UserDto.ts |   8 +-
 .../schemas}/UserInterestDto.ts               |   4 +-
 .../common/{ => src}/services/apiServices.ts  |  18 +-
 .../services/authorizationServices.ts         |   4 +-
 .../packages/common/tsconfig.json             |   9 +
 .../packages/ui/src/icons/Fire.tsx            |   1 +
 .../packages/ui/src/icons/IconProps.ts        |   2 +-
 Client/reasn-client/yarn.lock                 |  27 ++-
 .../ReasnAPI/Services/EventService.cs         |   6 +-
 .../ReasnAPI/Services/ParameterService.cs     |   2 +-
 50 files changed, 1005 insertions(+), 108 deletions(-)
 create mode 100644 Client/reasn-client/apps/web/lib/request.ts
 create mode 100644 Client/reasn-client/apps/web/lib/session.ts
 create mode 100644 Client/reasn-client/apps/web/lib/token.ts
 create mode 100644 Client/reasn-client/apps/web/services/auth.ts
 create mode 100644 Client/reasn-client/apps/web/services/event.ts
 create mode 100644 Client/reasn-client/apps/web/services/user.ts
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/AddressDto.test.ts (96%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/CommentDto.test.ts (97%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/EventDto.test.ts (98%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/ImageDto.test.ts (93%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/InterestDto.test.ts (91%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/ParameterDto.test.ts (94%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/ParticipantDto.test.ts (58%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/TagDto.test.ts (90%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/UserDto.test.ts (81%)
 rename Client/reasn-client/packages/common/__tests__/{models => schemas}/UserInterestDto.test.ts (92%)
 rename Client/reasn-client/packages/common/{enums/modelsEnums.ts => src/enums/schemasEnums.ts} (100%)
 rename Client/reasn-client/packages/common/{ => src}/enums/serviceEnums.ts (100%)
 rename Client/reasn-client/packages/common/{ => src}/errors/ApiAuthorizationError.ts (100%)
 rename Client/reasn-client/packages/common/{ => src}/errors/ApiConnectionError.ts (100%)
 rename Client/reasn-client/packages/common/{ => src}/errors/ModelMappingError.ts (100%)
 rename Client/reasn-client/packages/common/{ => src}/interfaces/AuthData.ts (64%)
 rename Client/reasn-client/packages/common/{models => src/schemas}/AddressDto.ts (88%)
 rename Client/reasn-client/packages/common/{models => src/schemas}/CommentDto.ts (93%)
 rename Client/reasn-client/packages/common/{models => src/schemas}/EventDto.ts (89%)
 create mode 100644 Client/reasn-client/packages/common/src/schemas/EventRequest.ts
 create mode 100644 Client/reasn-client/packages/common/src/schemas/EventResponse.ts
 rename Client/reasn-client/packages/common/{models => src/schemas}/ImageDto.ts (87%)
 rename Client/reasn-client/packages/common/{models => src/schemas}/InterestDto.ts (92%)
 create mode 100644 Client/reasn-client/packages/common/src/schemas/LoginRequest.ts
 rename Client/reasn-client/packages/common/{models => src/schemas}/ParameterDto.ts (93%)
 rename Client/reasn-client/packages/common/{models => src/schemas}/ParticipantDto.ts (83%)
 create mode 100644 Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts
 rename Client/reasn-client/packages/common/{models => src/schemas}/TagDto.ts (91%)
 create mode 100644 Client/reasn-client/packages/common/src/schemas/TokenPayload.ts
 rename Client/reasn-client/packages/common/{models => src/schemas}/UserDto.ts (83%)
 rename Client/reasn-client/packages/common/{models => src/schemas}/UserInterestDto.ts (86%)
 rename Client/reasn-client/packages/common/{ => src}/services/apiServices.ts (80%)
 rename Client/reasn-client/packages/common/{ => src}/services/authorizationServices.ts (89%)
 create mode 100644 Client/reasn-client/packages/common/tsconfig.json

diff --git a/Client/reasn-client/.husky/pre-commit b/Client/reasn-client/.husky/pre-commit
index 1d9a8b60..fe97ecab 100644
--- a/Client/reasn-client/.husky/pre-commit
+++ b/Client/reasn-client/.husky/pre-commit
@@ -3,7 +3,7 @@
 
 (cd ./Client/reasn-client && yarn lint-staged)
 (cd ./Server/ReasnAPI && dotnet format)
-if ! git diff --quiet; then
+if git diff --name-only --quiet | grep '\.cs$'; then
   echo "🚫 dotnet format made changes, commit aborted."
   exit 1
 fi
\ No newline at end of file
diff --git a/Client/reasn-client/apps/web/lib/request.ts b/Client/reasn-client/apps/web/lib/request.ts
new file mode 100644
index 00000000..05c26ba1
--- /dev/null
+++ b/Client/reasn-client/apps/web/lib/request.ts
@@ -0,0 +1,79 @@
+import ApiAuthorizationError from "@reasn/common/src/errors/ApiAuthorizationError";
+import ApiConnectionError from "@reasn/common/src/errors/ApiConnectionError";
+import fetch from "cross-fetch";
+import { getToken } from "@/lib/token";
+
+export enum HttpMethod {
+  GET = "GET",
+  POST = "POST",
+  PUT = "PUT",
+  DELETE = "DELETE",
+}
+
+export type ProblemDetails = {
+  type?: string;
+  title: string;
+  status: number;
+  details?: string;
+  instance?: string;
+};
+
+export type RequestOptions = {
+  method: HttpMethod;
+  body?: Object | FormData;
+  authRequired?: boolean;
+};
+
+export const sendRequest = async <T>(
+  url: string | URL,
+  { method, body = {}, authRequired = false }: RequestOptions,
+): Promise<T> => {
+  try {
+    let headers: HeadersInit = new Headers();
+    if (authRequired) {
+      const token = getToken();
+      if (!token) {
+        throw new ApiAuthorizationError(
+          "Unauthorized access. No token found in cookies",
+        );
+      }
+      headers.set("Authorization", `Bearer ${token}`);
+    }
+
+    const fetchOptions: RequestInit = {
+      method: method,
+      headers,
+    };
+
+    if (method == HttpMethod.POST || method == HttpMethod.PUT) {
+      if (body instanceof FormData) {
+        fetchOptions.body = body;
+      } else {
+        headers.set("Content-Type", "application/json");
+        fetchOptions.body = JSON.stringify(body);
+      }
+    }
+
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      const problemDetails = (await response.json()) as ProblemDetails;
+      console.error(
+        `[HTTP ${problemDetails.instance ?? ""} ${response.status}]: ${
+          problemDetails.details ?? problemDetails.title
+        }`,
+      );
+
+      throw new ApiConnectionError(
+        response.status,
+        problemDetails.details ?? problemDetails.title,
+      );
+    }
+
+    return response.json().catch(() => {}) as T;
+  } catch (error) {
+    console.error(
+      `Error while sending request to ${url} with method ${method}: ${error}`,
+    );
+    throw Error;
+  }
+};
diff --git a/Client/reasn-client/apps/web/lib/session.ts b/Client/reasn-client/apps/web/lib/session.ts
new file mode 100644
index 00000000..ecdde0e4
--- /dev/null
+++ b/Client/reasn-client/apps/web/lib/session.ts
@@ -0,0 +1,51 @@
+import { jwtDecode, JwtPayload } from "jwt-decode";
+import { UserRole } from "@reasn/common/src/enums/modelsEnums";
+import { getToken } from "@/lib/token";
+
+export const SESSION_DEFAULT = {
+  token: null,
+  isAuthenticated: () => false,
+};
+
+type User = {
+  email: string;
+  role: UserRole;
+};
+
+export type Session = {
+  token: string | null;
+  user?: User;
+  isAuthenticated: () => boolean;
+};
+
+interface ReasnJwtPayload extends JwtPayload {
+  email?: string;
+  role?: UserRole;
+}
+
+export const getSession = (): Session => {
+  const token = getToken();
+  if (!token) {
+    return SESSION_DEFAULT;
+  }
+
+  try {
+    const decodedToken = jwtDecode<ReasnJwtPayload>(token);
+    const isUserValid =
+      decodedToken.email !== undefined && decodedToken.role !== undefined;
+
+    return {
+      token: token,
+      user: isUserValid
+        ? {
+            email: decodedToken.email as string,
+            role: decodedToken.role as UserRole,
+          }
+        : undefined,
+      isAuthenticated: () => token !== null && isUserValid,
+    };
+  } catch (error) {
+    console.error("[ERROR]: Failed to decode JWT token");
+    return SESSION_DEFAULT;
+  }
+};
diff --git a/Client/reasn-client/apps/web/lib/token.ts b/Client/reasn-client/apps/web/lib/token.ts
new file mode 100644
index 00000000..afd60c19
--- /dev/null
+++ b/Client/reasn-client/apps/web/lib/token.ts
@@ -0,0 +1,23 @@
+import { cookies } from "next/headers";
+import { TokenPayload } from "@reasn/common/src/schemas/tokenPayload";
+
+const TOKEN_KEY = "REASN_TOKEN";
+
+export const setToken = (tokenPayload: TokenPayload): void => {
+  cookies().set(TOKEN_KEY, tokenPayload.accessToken, {
+    maxAge: tokenPayload.expiresIn,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "strict",
+    httpOnly: true,
+  });
+};
+
+export const clearToken = (): void => {
+  cookies().set(TOKEN_KEY, "", { maxAge: 0 });
+};
+
+export const getToken = (): string | null => {
+  const token = cookies().get(TOKEN_KEY)?.value;
+  if (!token) return null;
+  return token;
+};
diff --git a/Client/reasn-client/apps/web/package.json b/Client/reasn-client/apps/web/package.json
index 27233e01..7fdb9811 100644
--- a/Client/reasn-client/apps/web/package.json
+++ b/Client/reasn-client/apps/web/package.json
@@ -9,7 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reasn/common": "*",
     "@reasn/ui": "*",
+    "@types/url-search-params": "^1.1.2",
+    "jwt-decode": "^4.0.0",
     "next": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/Client/reasn-client/apps/web/services/auth.ts b/Client/reasn-client/apps/web/services/auth.ts
new file mode 100644
index 00000000..bc20bf6b
--- /dev/null
+++ b/Client/reasn-client/apps/web/services/auth.ts
@@ -0,0 +1,34 @@
+import { sendRequest, HttpMethod } from "@/lib/request";
+import {
+  TokenPayload,
+  TokenPayloadMapper,
+} from "@reasn/common/src/schemas/TokenPayload";
+import { LoginRequest } from "@reasn/common/src/schemas/LoginRequest";
+import { RegisterRequest } from "@reasn/common/src/schemas/RegisterRequest";
+import { UserDto, UserDtoMapper } from "@reasn/common/src/schemas/UserDto";
+
+const baseUrl = `${process.env.REASN_API_URL}/api/v1/auth`;
+
+export const login = async (
+  loginRequest: LoginRequest,
+): Promise<TokenPayload> => {
+  const url = new URL(`${baseUrl}/login`);
+
+  const response = await sendRequest<TokenPayload>(url, {
+    method: HttpMethod.POST,
+    body: loginRequest,
+  });
+  return TokenPayloadMapper.fromObject(response);
+};
+
+export const register = async (
+  registerRequest: RegisterRequest,
+): Promise<UserDto> => {
+  const url = new URL(`${baseUrl}/register`);
+
+  const response = await sendRequest<UserDto>(url, {
+    method: HttpMethod.POST,
+    body: registerRequest,
+  });
+  return UserDtoMapper.fromObject(response);
+};
diff --git a/Client/reasn-client/apps/web/services/event.ts b/Client/reasn-client/apps/web/services/event.ts
new file mode 100644
index 00000000..ea052b4b
--- /dev/null
+++ b/Client/reasn-client/apps/web/services/event.ts
@@ -0,0 +1,181 @@
+import { sendRequest, HttpMethod } from "@/lib/request";
+import { EventRequest } from "@reasn/common/src/schemas/EventRequest";
+import {
+  EventResponse,
+  EventResponseMapper,
+} from "@reasn/common/src/schemas/EventResponse";
+import { ParameterDto } from "@reasn/common/src/schemas/ParameterDto";
+import { TagDto } from "@reasn/common/src/schemas/TagDto";
+
+const baseUrl = `${process.env.REASN_API_URL}/api/v1/events`;
+
+export const getEvents = async (
+  params: Record<string, string> = {},
+): Promise<EventResponse[]> => {
+  const url = new URL(baseUrl);
+  url.search = new URLSearchParams(params).toString();
+
+  const response = await sendRequest<EventResponse[]>(url, {
+    method: HttpMethod.GET,
+  });
+  return response;
+};
+
+export const createEvent = async (
+  eventRequest: EventRequest,
+): Promise<EventResponse> => {
+  const url = new URL(baseUrl);
+
+  const response = await sendRequest<EventResponse>(url, {
+    method: HttpMethod.POST,
+    body: eventRequest,
+    authRequired: true,
+  });
+  return EventResponseMapper.fromObject(response);
+};
+
+export const getEventBySlug = async (slug: string): Promise<EventResponse> => {
+  const url = new URL(`${baseUrl}/${slug}`);
+
+  const response = await sendRequest<EventResponse>(url, {
+    method: HttpMethod.GET,
+  });
+  return EventResponseMapper.fromObject(response);
+};
+
+export const updateEvent = async (
+  slug: string,
+  event: any,
+): Promise<EventResponse> => {
+  const url = new URL(`${baseUrl}/${slug}`);
+
+  const response = await sendRequest<EventResponse>(url, {
+    method: HttpMethod.PUT,
+    body: event,
+    authRequired: true,
+  });
+  return EventResponseMapper.fromObject(response);
+};
+
+export const getEventsRequests = async (): Promise<EventResponse[]> => {
+  const url = new URL(`${baseUrl}/requests`);
+
+  const response = await sendRequest<EventResponse[]>(url, {
+    method: HttpMethod.GET,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const approveEventRequest = async (slug: string): Promise<Object> => {
+  const url = new URL(`${baseUrl}/requests/${slug}`);
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.POST,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const addEventImage = async (
+  slug: string,
+  images: Blob[],
+): Promise<Object> => {
+  const url = new URL(`${baseUrl}/${slug}/images`);
+
+  const formData = new FormData();
+  images.forEach((image) => {
+    formData.append("images", image);
+  });
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.POST,
+    body: formData,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const updateEventImage = async (
+  slug: string,
+  images: Blob[],
+): Promise<Object> => {
+  const url = new URL(`${baseUrl}/${slug}/images`);
+
+  const formData = new FormData();
+  images.forEach((image) => {
+    formData.append("images", image);
+  });
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.PUT,
+    body: formData,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const getEventImages = async (slug: string): Promise<string[]> => {
+  const url = new URL(`${baseUrl}/${slug}/images`);
+
+  const response = await sendRequest<string[]>(url, { method: HttpMethod.GET });
+  return response;
+};
+
+export const getEventParticipants = async (slug: string): Promise<any> => {
+  const url = new URL(`${baseUrl}/${slug}/participants`);
+
+  const response = await sendRequest<any>(url, { method: HttpMethod.GET });
+  return response;
+};
+
+export const getEventComments = async (slug: string): Promise<any> => {
+  const url = new URL(`${baseUrl}/${slug}/comments`);
+
+  const response = await sendRequest<any>(url, { method: HttpMethod.GET });
+  return response;
+};
+
+export const addEventComment = async (
+  slug: string,
+  comment: any,
+): Promise<any> => {
+  const url = new URL(`${baseUrl}/${slug}/comments`);
+
+  const response = await sendRequest<any>(url, {
+    method: HttpMethod.POST,
+    body: comment,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const getEventsParameters = async (): Promise<ParameterDto[]> => {
+  const url = new URL(`${baseUrl}/parameters`);
+
+  const response = await sendRequest<ParameterDto[]>(url, {
+    method: HttpMethod.GET,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const getEventsTags = async (): Promise<TagDto[]> => {
+  const url = new URL(`${baseUrl}/tags`);
+
+  const response = await sendRequest<TagDto[]>(url, {
+    method: HttpMethod.GET,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const deleteEventsTag = async (tagId: number): Promise<Object> => {
+  const url = new URL(`${baseUrl}/tags/${tagId}`);
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.DELETE,
+    authRequired: true,
+  });
+  return response;
+};
diff --git a/Client/reasn-client/apps/web/services/user.ts b/Client/reasn-client/apps/web/services/user.ts
new file mode 100644
index 00000000..80badc15
--- /dev/null
+++ b/Client/reasn-client/apps/web/services/user.ts
@@ -0,0 +1,174 @@
+import { sendRequest, HttpMethod } from "@/lib/request";
+import { UserDto, UserDtoMapper } from "@reasn/common/src/schemas/UserDto";
+import {
+  ParticipantDto,
+  ParticipantDtoMapper,
+} from "@reasn/common/src/schemas/ParticipantDto";
+
+const baseUrl = `${process.env.REASN_API_URL}/api/v1`;
+const baseUsersUrl = `${baseUrl}/users`;
+const baseMeUrl = `${baseUrl}/me`;
+
+export const getUsers = async (
+  params: Record<string, string> = {},
+): Promise<any> => {
+  const url = new URL(baseUsersUrl);
+  url.search = new URLSearchParams(params).toString();
+
+  const response = await sendRequest<any>(url, {
+    method: HttpMethod.GET,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const getUserByUsername = async (username: string): Promise<UserDto> => {
+  const url = new URL(`${baseUsersUrl}/${username}`);
+
+  const response = await sendRequest<UserDto>(url, { method: HttpMethod.GET });
+  return UserDtoMapper.fromObject(response);
+};
+
+export const updateUser = async (
+  username: string,
+  user: UserDto,
+): Promise<UserDto> => {
+  const url = new URL(`${baseUsersUrl}/${username}`);
+
+  const response = await sendRequest<UserDto>(url, {
+    method: HttpMethod.PUT,
+    body: user,
+    authRequired: true,
+  });
+  return UserDtoMapper.fromObject(response);
+};
+
+export const getUsersInterests = async (
+  params: Record<string, string> = {},
+): Promise<any> => {
+  const url = new URL(`${baseUsersUrl}/interests`);
+  url.search = new URLSearchParams(params).toString();
+
+  const response = await sendRequest<any>(url, { method: HttpMethod.GET });
+  return response;
+};
+
+export const deleteUserInterest = async (
+  insterestId: number,
+): Promise<Object> => {
+  const url = new URL(`${baseUsersUrl}/interests/${insterestId}`);
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.DELETE,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const getCurrentUser = async (): Promise<UserDto> => {
+  const url = new URL(baseMeUrl);
+
+  const response = await sendRequest<UserDto>(url, {
+    method: HttpMethod.GET,
+    authRequired: true,
+  });
+  return UserDtoMapper.fromObject(response);
+};
+
+export const updateCurrentUser = async (user: UserDto): Promise<UserDto> => {
+  const url = new URL(baseMeUrl);
+
+  const response = await sendRequest<UserDto>(url, {
+    method: HttpMethod.PUT,
+    body: user,
+    authRequired: true,
+  });
+  return UserDtoMapper.fromObject(response);
+};
+
+export const addCurrentUserImage = async (image: Blob): Promise<Object> => {
+  const url = new URL(`${baseMeUrl}/image`);
+
+  const formData = new FormData();
+  formData.append("images", image);
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.POST,
+    body: formData,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const updateCurrentUserImage = async (image: Blob): Promise<Object> => {
+  const url = new URL(`${baseMeUrl}/image`);
+
+  const formData = new FormData();
+  formData.append("images", image);
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.PUT,
+    body: formData,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const deleteCurrentUserImage = async (): Promise<Object> => {
+  const url = new URL(`${baseMeUrl}/image`);
+
+  const response = await sendRequest<Object>(url, {
+    method: HttpMethod.DELETE,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const getCurrentUserEvents = async (
+  params: Record<string, string> = {},
+): Promise<any> => {
+  const url = new URL(`${baseMeUrl}/events`);
+  url.search = new URLSearchParams(params).toString();
+
+  const response = await sendRequest<any>(url, {
+    method: HttpMethod.GET,
+    authRequired: true,
+  });
+  return response;
+};
+
+export const enrollCurrentUserInEvent = async (
+  slug: string,
+): Promise<ParticipantDto> => {
+  const url = new URL(`${baseMeUrl}/events/${slug}/enroll`);
+
+  const response = await sendRequest<ParticipantDto>(url, {
+    method: HttpMethod.POST,
+    authRequired: true,
+  });
+  return ParticipantDtoMapper.fromObject(response);
+};
+
+export const confirmCurrentUserAttendace = async (
+  slug: string,
+): Promise<ParticipantDto> => {
+  const url = new URL(`${baseMeUrl}/events/${slug}/confirm`);
+
+  const response = await sendRequest<ParticipantDto>(url, {
+    method: HttpMethod.POST,
+    authRequired: true,
+  });
+  return ParticipantDtoMapper.fromObject(response);
+};
+
+export const cancelCurrentUserAttendance = async (
+  slug: string,
+): Promise<ParticipantDto> => {
+  const url = new URL(`${baseMeUrl}/events/${slug}/cancel`);
+
+  const response = await sendRequest<ParticipantDto>(url, {
+    method: HttpMethod.POST,
+    authRequired: true,
+  });
+  return ParticipantDtoMapper.fromObject(response);
+};
diff --git a/Client/reasn-client/apps/web/tsconfig.json b/Client/reasn-client/apps/web/tsconfig.json
index aea6585a..d2299420 100644
--- a/Client/reasn-client/apps/web/tsconfig.json
+++ b/Client/reasn-client/apps/web/tsconfig.json
@@ -1,12 +1,16 @@
 {
   "extends": "@reasn/typescript-config/nextjs.json",
   "compilerOptions": {
+    "baseUrl": ".",
     "plugins": [
       {
         "name": "next"
       }
     ],
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/Client/reasn-client/packages/common/__tests__/models/AddressDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts
similarity index 96%
rename from Client/reasn-client/packages/common/__tests__/models/AddressDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts
index 392bb9c4..eccb599b 100644
--- a/Client/reasn-client/packages/common/__tests__/models/AddressDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts
@@ -1,5 +1,8 @@
-import { AddressDtoMapper, AddressDto } from "@reasn/common/models/AddressDto";
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import {
+  AddressDtoMapper,
+  AddressDto,
+} from "@reasn/common/src/schemas/AddressDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 
 describe("AddressDto", () => {
   const country = "Test Country";
diff --git a/Client/reasn-client/packages/common/__tests__/models/CommentDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts
similarity index 97%
rename from Client/reasn-client/packages/common/__tests__/models/CommentDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts
index eefcf6d6..20645b92 100644
--- a/Client/reasn-client/packages/common/__tests__/models/CommentDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts
@@ -1,5 +1,8 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { CommentDto, CommentDtoMapper } from "@reasn/common/models/CommentDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
+import {
+  CommentDto,
+  CommentDtoMapper,
+} from "@reasn/common/src/schemas/CommentDto";
 
 describe("CommentDto", () => {
   const eventId = 1;
diff --git a/Client/reasn-client/packages/common/__tests__/models/EventDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts
similarity index 98%
rename from Client/reasn-client/packages/common/__tests__/models/EventDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts
index 177960cd..73a7a9dd 100644
--- a/Client/reasn-client/packages/common/__tests__/models/EventDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts
@@ -1,7 +1,7 @@
-import { EventDto, EventDtoMapper } from "@reasn/common/models/EventDto";
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { TagDto } from "@reasn/common/models/TagDto";
+import { EventDto, EventDtoMapper } from "@reasn/common/src/schemas/EventDto";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
+import { TagDto } from "@reasn/common/src/schemas/TagDto";
 
 describe("EventDto", () => {
   const name = "Test Event";
diff --git a/Client/reasn-client/packages/common/__tests__/models/ImageDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts
similarity index 93%
rename from Client/reasn-client/packages/common/__tests__/models/ImageDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts
index c98f03c8..8d8df35f 100644
--- a/Client/reasn-client/packages/common/__tests__/models/ImageDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts
@@ -1,6 +1,6 @@
-import { ImageDto, ImageDtoMapper } from "@reasn/common/models/ImageDto";
-import { ObjectType } from "@reasn/common/enums/modelsEnums";
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import { ImageDto, ImageDtoMapper } from "@reasn/common/src/schemas/ImageDto";
+import { ObjectType } from "@reasn/common/src/enums/schemasEnums";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 
 describe("ImageDto", () => {
   const imageData = "Test Image";
diff --git a/Client/reasn-client/packages/common/__tests__/models/InterestDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts
similarity index 91%
rename from Client/reasn-client/packages/common/__tests__/models/InterestDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts
index 7f059890..af828f5f 100644
--- a/Client/reasn-client/packages/common/__tests__/models/InterestDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts
@@ -1,8 +1,8 @@
 import {
   InterestDto,
   InterestDtoMapper,
-} from "@reasn/common/models/InterestDto";
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+} from "@reasn/common/src/schemas/InterestDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 
 describe("InterestDto", () => {
   const name = "Interest";
diff --git a/Client/reasn-client/packages/common/__tests__/models/ParameterDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts
similarity index 94%
rename from Client/reasn-client/packages/common/__tests__/models/ParameterDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts
index 69153166..68ee9c81 100644
--- a/Client/reasn-client/packages/common/__tests__/models/ParameterDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts
@@ -1,8 +1,8 @@
 import {
   ParameterDto,
   ParameterDtoMapper,
-} from "@reasn/common/models/ParameterDto";
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+} from "@reasn/common/src/schemas/ParameterDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 
 describe("ParameterDto", () => {
   const key = "Test Key";
diff --git a/Client/reasn-client/packages/common/__tests__/models/ParticipantDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts
similarity index 58%
rename from Client/reasn-client/packages/common/__tests__/models/ParticipantDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts
index 75c65e0a..8218b83a 100644
--- a/Client/reasn-client/packages/common/__tests__/models/ParticipantDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts
@@ -1,28 +1,28 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 import {
   ParticipantDto,
   ParticipantDtoMapper,
-} from "@reasn/common/models/ParticipantDto";
-import { ParticipantStatus } from "@reasn/common/enums/modelsEnums";
+} from "@reasn/common/src/schemas/ParticipantDto";
+import { ParticipantStatus } from "@reasn/common/src/enums/schemasEnums";
 
 describe("ParticipantDto", () => {
-  const eventId = 1;
-  const userId = 2;
+  const eventSlug = "event-slug";
+  const username = "username";
   const status = ParticipantStatus.INTERESTED;
 
   describe("fromJson", () => {
     it("should create an instance of ParticipantDto from JSON string", () => {
       const json = `{
-                "EventId": ${eventId},
-                "UserId": ${userId},
+                "EventSlug": "${eventSlug}",
+                "Username": "${username}",
                 "Status": "${status}"
             }`;
 
       let participant = ParticipantDtoMapper.fromJSON(json);
       participant = participant as ParticipantDto;
 
-      expect(participant.EventId).toBe(eventId);
-      expect(participant.UserId).toBe(userId);
+      expect(participant.EventSlug).toBe(eventSlug);
+      expect(participant.Username).toBe(username);
       expect(participant.Status).toBe(status);
     });
 
@@ -33,28 +33,28 @@ describe("ParticipantDto", () => {
     });
 
     it("should throw an error when providing JSON without each property individually", () => {
-      const jsonWithoutEventId = `{
-                "UserId": ${userId},
+      const jsonWithoutEventSlug = `{
+                "Username": "${username}",
                 "Status": "${status}"
             }`;
 
-      const jsonWithoutUserId = `{
-                "EventId": ${eventId},
+      const jsonWithoutUsername = `{
+                "EventSlug": "${eventSlug}",
                 "Status": "${status}"
             }`;
 
-      const jsonWithoutStatusId = `{
-                "EventId": ${eventId},
-                "UserId": ${userId}
+      const jsonWithoutStatus = `{
+                "EventSlug": "${eventSlug}",
+                "Username": "${username}"
             }`;
 
-      expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutEventId)).toThrow(
+      expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutEventSlug)).toThrow(
         ModelMappingError,
       );
-      expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutUserId)).toThrow(
+      expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutUsername)).toThrow(
         ModelMappingError,
       );
-      expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutStatusId)).toThrow(
+      expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutStatus)).toThrow(
         ModelMappingError,
       );
     });
@@ -63,52 +63,52 @@ describe("ParticipantDto", () => {
   describe("fromObject", () => {
     it("should create an instance of ParticipantDto from an object", () => {
       const object = {
-        EventId: eventId,
-        UserId: userId,
+        EventSlug: eventSlug,
+        Username: username,
         Status: status,
       };
 
       let participant = ParticipantDtoMapper.fromObject(object);
       participant = participant as ParticipantDto;
 
-      expect(participant.EventId).toBe(eventId);
-      expect(participant.UserId).toBe(userId);
+      expect(participant.EventSlug).toBe(eventSlug);
+      expect(participant.Username).toBe(username);
       expect(participant.Status).toBe(status);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        EventId: true,
-        UserId: null,
+        EventStatus: true,
+        Username: null,
         Status: "invalid",
       };
 
-      const objectWithoutEventId = {
-        UserId: userId,
+      const objectWithoutEventSlug = {
+        Username: username,
         Status: status,
       };
 
-      const objectWithoutUserId = {
-        EventId: eventId,
+      const objectWithoutUsername = {
+        EventSlug: eventSlug,
         Status: status,
       };
 
-      const objectWithoutStatusId = {
-        EventId: eventId,
-        UserId: userId,
+      const objectWithoutStatus = {
+        EventSlug: eventSlug,
+        Username: username,
       };
 
       expect(() => ParticipantDtoMapper.fromObject(object)).toThrow(
         ModelMappingError,
       );
       expect(() =>
-        ParticipantDtoMapper.fromObject(objectWithoutEventId),
+        ParticipantDtoMapper.fromObject(objectWithoutEventSlug),
       ).toThrow(ModelMappingError);
       expect(() =>
-        ParticipantDtoMapper.fromObject(objectWithoutUserId),
+        ParticipantDtoMapper.fromObject(objectWithoutUsername),
       ).toThrow(ModelMappingError);
       expect(() =>
-        ParticipantDtoMapper.fromObject(objectWithoutStatusId),
+        ParticipantDtoMapper.fromObject(objectWithoutStatus),
       ).toThrow(ModelMappingError);
     });
   });
diff --git a/Client/reasn-client/packages/common/__tests__/models/TagDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts
similarity index 90%
rename from Client/reasn-client/packages/common/__tests__/models/TagDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts
index 65913622..aefba118 100644
--- a/Client/reasn-client/packages/common/__tests__/models/TagDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts
@@ -1,5 +1,5 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { TagDto, TagDtoMapper } from "@reasn/common/models/TagDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
+import { TagDto, TagDtoMapper } from "@reasn/common/src/schemas/TagDto";
 
 describe("TagDto", () => {
   const name = "tag name";
diff --git a/Client/reasn-client/packages/common/__tests__/models/UserDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
similarity index 81%
rename from Client/reasn-client/packages/common/__tests__/models/UserDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
index e0ed639d..31b26838 100644
--- a/Client/reasn-client/packages/common/__tests__/models/UserDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
@@ -1,7 +1,8 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { UserDto, UserDtoMapper } from "@reasn/common/models/UserDto";
-import { UserInterestDto } from "@reasn/common/models/UserInterestDto";
-import { UserRole } from "@reasn/common/enums/modelsEnums";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
+import { UserDto, UserDtoMapper } from "@reasn/common/src/schemas/UserDto";
+import { UserInterestDto } from "@reasn/common/src/schemas/UserInterestDto";
+import { UserRole } from "@reasn/common/src/enums/schemasEnums";
+import { AddressDto } from "@reasn/common/src/schemas/AddressDto";
 
 describe("UserDto", () => {
   const username = "john_doe";
@@ -11,6 +12,13 @@ describe("UserDto", () => {
   const phone = "+48 1234567890";
   const role = UserRole.USER;
   const addressId = 2;
+  const address: AddressDto = {
+    Country: "Test Country",
+    City: "Test City",
+    Street: "Test Street",
+    State: "Test State",
+    ZipCode: "12345",
+  };
   const interests: UserInterestDto[] = [
     { Interest: { Name: "Programming" }, Level: 5 },
     { Interest: { Name: "Music" }, Level: 3 },
@@ -26,6 +34,7 @@ describe("UserDto", () => {
                 "Phone": "${phone}",
                 "Role": "${role}",
                 "AddressId": ${addressId},
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
@@ -39,6 +48,7 @@ describe("UserDto", () => {
       expect(user.Phone).toBe(phone);
       expect(user.Role).toBe(role);
       expect(user.AddressId).toBe(addressId);
+      expect(user.Address).toEqual(address);
       expect(user.Intrests).toEqual(interests);
     });
 
@@ -54,6 +64,7 @@ describe("UserDto", () => {
                 "Phone": "${phone}",
                 "Role": "${role}",
                 "AddressId": ${addressId},
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
@@ -64,6 +75,7 @@ describe("UserDto", () => {
                 "Phone": "${phone}",
                 "Role": "${role}",
                 "AddressId": ${addressId},
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
@@ -74,6 +86,7 @@ describe("UserDto", () => {
                 "Phone": "${phone}",
                 "Role": "${role}",
                 "AddressId": ${addressId},
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
@@ -84,6 +97,7 @@ describe("UserDto", () => {
                 "Phone": "${phone}",
                 "Role": "${role}",
                 "AddressId": ${addressId},
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
@@ -104,6 +118,7 @@ describe("UserDto", () => {
                 "Email": "${email}",
                 "Phone": "${phone}",
                 "AddressId": ${addressId},
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
@@ -114,9 +129,21 @@ describe("UserDto", () => {
                 "Email": "${email}",
                 "Phone": "${phone}",
                 "Role": "${role}",
+                "Address": ${JSON.stringify(address)},
                 "Intrests": ${JSON.stringify(interests)}
             }`;
 
+      const jsonWithoutAddress = `{
+              "Username": "${username}",
+              "Name": "${name}",
+              "Surname": "${surname}",
+              "Email": "${email}",
+              "Phone": "${phone}",
+              "AddressId": ${addressId},
+              "Role": "${role}",
+              "Intrests": ${JSON.stringify(interests)}
+            }`;
+
       const jsonWithoutInterests = `{
                 "Username": "${username}",
                 "Name": "${name}",
@@ -148,6 +175,9 @@ describe("UserDto", () => {
       expect(() => UserDtoMapper.fromJSON(jsonWithoutAddressId)).toThrow(
         ModelMappingError,
       );
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutAddress)).toThrow(
+        ModelMappingError,
+      );
       expect(() => UserDtoMapper.fromJSON(jsonWithoutInterests)).toThrow(
         ModelMappingError,
       );
@@ -164,6 +194,7 @@ describe("UserDto", () => {
         Phone: phone,
         Role: role,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -177,6 +208,7 @@ describe("UserDto", () => {
       expect(user.Phone).toBe(phone);
       expect(user.Role).toBe(role);
       expect(user.AddressId).toBe(addressId);
+      expect(user.Address).toEqual(address);
       expect(user.Intrests).toEqual(interests);
     });
 
@@ -199,6 +231,7 @@ describe("UserDto", () => {
         Phone: phone,
         Role: role,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -209,6 +242,7 @@ describe("UserDto", () => {
         Phone: phone,
         Role: role,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -219,6 +253,7 @@ describe("UserDto", () => {
         Phone: phone,
         Role: role,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -229,6 +264,7 @@ describe("UserDto", () => {
         Phone: phone,
         Role: role,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -239,6 +275,7 @@ describe("UserDto", () => {
         Email: email,
         Role: role,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -249,6 +286,7 @@ describe("UserDto", () => {
         Email: email,
         Phone: phone,
         AddressId: addressId,
+        Address: address,
         Intrests: interests,
       };
 
@@ -259,6 +297,18 @@ describe("UserDto", () => {
         Email: email,
         Phone: phone,
         Role: role,
+        Address: address,
+        Intrests: interests,
+      };
+
+      const objectWithoutAddress = {
+        Username: username,
+        Name: name,
+        Surname: surname,
+        Email: email,
+        Phone: phone,
+        Role: role,
+        AddressId: addressId,
         Intrests: interests,
       };
 
@@ -270,6 +320,7 @@ describe("UserDto", () => {
         Phone: phone,
         Role: role,
         AddressId: addressId,
+        Address: address,
       };
 
       expect(() => UserDtoMapper.fromObject(object)).toThrow(ModelMappingError);
@@ -294,6 +345,9 @@ describe("UserDto", () => {
       expect(() => UserDtoMapper.fromObject(objectWithoutAddressId)).toThrow(
         ModelMappingError,
       );
+      expect(() => UserDtoMapper.fromObject(objectWithoutAddress)).toThrow(
+        ModelMappingError,
+      );
       expect(() => UserDtoMapper.fromObject(objectWithoutInterests)).toThrow(
         ModelMappingError,
       );
diff --git a/Client/reasn-client/packages/common/__tests__/models/UserInterestDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts
similarity index 92%
rename from Client/reasn-client/packages/common/__tests__/models/UserInterestDto.test.ts
rename to Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts
index 31777023..e8c1283c 100644
--- a/Client/reasn-client/packages/common/__tests__/models/UserInterestDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts
@@ -1,9 +1,9 @@
-import { InterestDto } from "@reasn/common/models/InterestDto";
+import { InterestDto } from "@reasn/common/src/schemas/InterestDto";
 import {
   UserInterestDto,
   UserInterestDtoMapper,
-} from "@reasn/common/models/UserInterestDto";
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+} from "@reasn/common/src/schemas/UserInterestDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 
 describe("UserInterestDto", () => {
   const interest = { Name: "Interest" } as InterestDto;
diff --git a/Client/reasn-client/packages/common/__tests__/services/apiServices.test.ts b/Client/reasn-client/packages/common/__tests__/services/apiServices.test.ts
index 0f136c33..0c9327a9 100644
--- a/Client/reasn-client/packages/common/__tests__/services/apiServices.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/services/apiServices.test.ts
@@ -1,14 +1,14 @@
-import { sendRequest } from "@reasn/common/services/apiServices";
-import { getAuthDataFromSessionStorage } from "@reasn/common/services/authorizationServices";
-import { AuthData } from "@reasn/common/interfaces/AuthData";
-import { HttpMethod } from "@reasn/common/enums/serviceEnums";
+import { sendRequest } from "@reasn/common/src/services/apiServices";
+import { getAuthDataFromSessionStorage } from "@reasn/common/src/services/authorizationServices";
+import { AuthData } from "@reasn/common/src/interfaces/AuthData";
+import { HttpMethod } from "@reasn/common/src/enums/serviceEnums";
 import { describe, expect, it, jest, beforeEach } from "@jest/globals";
 import fetch from "cross-fetch";
-import ApiConnectionError from "@reasn/common/errors/ApiConnectionError";
-import ApiAuthorizationError from "@reasn/common/errors/ApiAuthorizationError";
+import ApiConnectionError from "@reasn/common/src/errors/ApiConnectionError";
+import ApiAuthorizationError from "@reasn/common/src/errors/ApiAuthorizationError";
 
 jest.mock("cross-fetch");
-jest.mock("@reasn/common/services/authorizationServices");
+jest.mock("@reasn/common/src/services/authorizationServices");
 
 describe("sendRequest", () => {
   beforeEach(() => {
diff --git a/Client/reasn-client/packages/common/package.json b/Client/reasn-client/packages/common/package.json
index 35064199..41f30a3a 100644
--- a/Client/reasn-client/packages/common/package.json
+++ b/Client/reasn-client/packages/common/package.json
@@ -1,8 +1,17 @@
 {
   "name": "@reasn/common",
   "version": "0.0.0",
-  "private": true,
-  "publishConfig": {
-    "access": "public"
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "zod": "^3.23.7"
+  },
+  "devDependencies": {
+    "@reasn/typescript-config": "workspace:*",
+    "jest": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
+    "typescript": "^5.3.3"
   }
 }
diff --git a/Client/reasn-client/packages/common/enums/modelsEnums.ts b/Client/reasn-client/packages/common/src/enums/schemasEnums.ts
similarity index 100%
rename from Client/reasn-client/packages/common/enums/modelsEnums.ts
rename to Client/reasn-client/packages/common/src/enums/schemasEnums.ts
diff --git a/Client/reasn-client/packages/common/enums/serviceEnums.ts b/Client/reasn-client/packages/common/src/enums/serviceEnums.ts
similarity index 100%
rename from Client/reasn-client/packages/common/enums/serviceEnums.ts
rename to Client/reasn-client/packages/common/src/enums/serviceEnums.ts
diff --git a/Client/reasn-client/packages/common/errors/ApiAuthorizationError.ts b/Client/reasn-client/packages/common/src/errors/ApiAuthorizationError.ts
similarity index 100%
rename from Client/reasn-client/packages/common/errors/ApiAuthorizationError.ts
rename to Client/reasn-client/packages/common/src/errors/ApiAuthorizationError.ts
diff --git a/Client/reasn-client/packages/common/errors/ApiConnectionError.ts b/Client/reasn-client/packages/common/src/errors/ApiConnectionError.ts
similarity index 100%
rename from Client/reasn-client/packages/common/errors/ApiConnectionError.ts
rename to Client/reasn-client/packages/common/src/errors/ApiConnectionError.ts
diff --git a/Client/reasn-client/packages/common/errors/ModelMappingError.ts b/Client/reasn-client/packages/common/src/errors/ModelMappingError.ts
similarity index 100%
rename from Client/reasn-client/packages/common/errors/ModelMappingError.ts
rename to Client/reasn-client/packages/common/src/errors/ModelMappingError.ts
diff --git a/Client/reasn-client/packages/common/interfaces/AuthData.ts b/Client/reasn-client/packages/common/src/interfaces/AuthData.ts
similarity index 64%
rename from Client/reasn-client/packages/common/interfaces/AuthData.ts
rename to Client/reasn-client/packages/common/src/interfaces/AuthData.ts
index e0cb3af4..3ee8a3bf 100644
--- a/Client/reasn-client/packages/common/interfaces/AuthData.ts
+++ b/Client/reasn-client/packages/common/src/interfaces/AuthData.ts
@@ -1,4 +1,4 @@
-import { UserRole } from "@reasn/common/enums/serviceEnums";
+import { UserRole } from "../enums/schemasEnums";
 
 /**
  * Represents the authentication data.
diff --git a/Client/reasn-client/packages/common/models/AddressDto.ts b/Client/reasn-client/packages/common/src/schemas/AddressDto.ts
similarity index 88%
rename from Client/reasn-client/packages/common/models/AddressDto.ts
rename to Client/reasn-client/packages/common/src/schemas/AddressDto.ts
index 0827e825..8ad11d68 100644
--- a/Client/reasn-client/packages/common/models/AddressDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/AddressDto.ts
@@ -1,4 +1,4 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const AddressDtoSchema = z.object({
@@ -20,8 +20,8 @@ export const AddressDtoSchema = z.object({
     .regex(/^\p{Lu}\p{Ll}+(?:(\s|-)\p{L}+)*$/u),
   ZipCode: z
     .string()
-    .nullable()
-    .refine((value) => value === null || /^[\p{L}\d\s-]{3,}$/u.test(value)),
+    .regex(/^[\p{L}\d\s-]{3,}$/u)
+    .nullable(),
 });
 
 export type AddressDto = z.infer<typeof AddressDtoSchema>;
diff --git a/Client/reasn-client/packages/common/models/CommentDto.ts b/Client/reasn-client/packages/common/src/schemas/CommentDto.ts
similarity index 93%
rename from Client/reasn-client/packages/common/models/CommentDto.ts
rename to Client/reasn-client/packages/common/src/schemas/CommentDto.ts
index 4e1f8a87..abe54755 100644
--- a/Client/reasn-client/packages/common/models/CommentDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/CommentDto.ts
@@ -1,4 +1,4 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const CommentDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/models/EventDto.ts b/Client/reasn-client/packages/common/src/schemas/EventDto.ts
similarity index 89%
rename from Client/reasn-client/packages/common/models/EventDto.ts
rename to Client/reasn-client/packages/common/src/schemas/EventDto.ts
index 8c360bdd..a9c1e0ba 100644
--- a/Client/reasn-client/packages/common/models/EventDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/EventDto.ts
@@ -1,6 +1,6 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { TagDtoSchema } from "@reasn/common/models/TagDto";
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import ModelMappingError from "../errors/ModelMappingError";
+import { TagDtoSchema } from "./TagDto";
+import { EventStatus } from "../enums/schemasEnums";
 import { z } from "zod";
 
 export const EventDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/src/schemas/EventRequest.ts b/Client/reasn-client/packages/common/src/schemas/EventRequest.ts
new file mode 100644
index 00000000..8b3eedf6
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/schemas/EventRequest.ts
@@ -0,0 +1,26 @@
+import { z } from "zod";
+import { AddressDtoSchema } from "./AddressDto";
+import { TagDtoSchema } from "./TagDto";
+import { ParameterDtoSchema } from "./ParameterDto";
+
+export const EventRequestSchema = z
+  .object({
+    name: z.string().max(64),
+    address: AddressDtoSchema,
+    description: z.string().max(4048),
+    startAt: z
+      .string()
+      .datetime({ offset: true })
+      .or(z.date())
+      .transform((arg) => new Date(arg)),
+    endAt: z
+      .string()
+      .datetime({ offset: true })
+      .or(z.date())
+      .transform((arg) => new Date(arg)),
+    tags: z.array(TagDtoSchema).nullable(),
+    parameters: z.array(ParameterDtoSchema).nullable(),
+  })
+  .refine((schema) => schema.startAt < schema.endAt);
+
+export type EventRequest = z.infer<typeof EventRequestSchema>;
diff --git a/Client/reasn-client/packages/common/src/schemas/EventResponse.ts b/Client/reasn-client/packages/common/src/schemas/EventResponse.ts
new file mode 100644
index 00000000..3eecda7e
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/schemas/EventResponse.ts
@@ -0,0 +1,79 @@
+import { z } from "zod";
+import { AddressDtoSchema } from "@reasn/common/src/schemas/AddressDto";
+import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
+import { TagDtoSchema } from "@reasn/common/src/schemas/TagDto";
+import { ParameterDtoSchema } from "@reasn/common/src/schemas/ParameterDto";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
+
+export const EventRespsoneSchema = z.object({
+  name: z.string().max(64),
+  addressId: z.number(),
+  address: AddressDtoSchema,
+  description: z.string().max(4048),
+  organizer: z.object({
+    username: z.string(),
+    image: z.string(),
+  }),
+  startAt: z
+    .string()
+    .datetime({ offset: true })
+    .or(z.date())
+    .transform((arg) => new Date(arg)),
+  endAt: z
+    .string()
+    .datetime({ offset: true })
+    .or(z.date())
+    .transform((arg) => new Date(arg)),
+  createdAt: z
+    .string()
+    .datetime({ offset: true })
+    .or(z.date())
+    .transform((arg) => new Date(arg)),
+  updatedAt: z
+    .string()
+    .datetime({ offset: true })
+    .or(z.date())
+    .transform((arg) => new Date(arg)),
+  slug: z
+    .string()
+    .max(128)
+    .regex(/^[\p{L}\d]+[\p{L}\d-]*$/u)
+    .nullable(),
+  status: z.nativeEnum(EventStatus),
+  tags: z.array(TagDtoSchema),
+  parameters: z.array(ParameterDtoSchema),
+  participants: z.object({
+    interested: z.number(),
+    participating: z.number(),
+  }),
+});
+
+export type EventResponse = z.infer<typeof EventRespsoneSchema>;
+
+export const EventResponseMapper = {
+  fromObject: (entity: object): EventResponse => {
+    const result = EventRespsoneSchema.safeParse(entity);
+    if (!result.success) {
+      throw new ModelMappingError(
+        "EventResponse",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+  fromJSON: (jsonEntity: string): any => {
+    if (!jsonEntity) {
+      throw new ModelMappingError("EventResponse", "Empty JSON string");
+    }
+    const result = EventRespsoneSchema.safeParse(JSON.parse(jsonEntity));
+    if (!result.success) {
+      throw new ModelMappingError(
+        "EventResponse",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+};
diff --git a/Client/reasn-client/packages/common/models/ImageDto.ts b/Client/reasn-client/packages/common/src/schemas/ImageDto.ts
similarity index 87%
rename from Client/reasn-client/packages/common/models/ImageDto.ts
rename to Client/reasn-client/packages/common/src/schemas/ImageDto.ts
index f0f89e79..5af26865 100644
--- a/Client/reasn-client/packages/common/models/ImageDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/ImageDto.ts
@@ -1,5 +1,5 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { ObjectType } from "@reasn/common/enums/modelsEnums";
+import ModelMappingError from "../errors/ModelMappingError";
+import { ObjectType } from "../enums/schemasEnums";
 import { z } from "zod";
 
 export const ImageDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/models/InterestDto.ts b/Client/reasn-client/packages/common/src/schemas/InterestDto.ts
similarity index 92%
rename from Client/reasn-client/packages/common/models/InterestDto.ts
rename to Client/reasn-client/packages/common/src/schemas/InterestDto.ts
index 9576f0ac..303e60c5 100644
--- a/Client/reasn-client/packages/common/models/InterestDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/InterestDto.ts
@@ -1,4 +1,4 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const InterestDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/src/schemas/LoginRequest.ts b/Client/reasn-client/packages/common/src/schemas/LoginRequest.ts
new file mode 100644
index 00000000..3c02aac0
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/schemas/LoginRequest.ts
@@ -0,0 +1,37 @@
+import ModelMappingError from "../errors/ModelMappingError";
+import { z } from "zod";
+
+export const LoginRequestSchema = z.object({
+  email: z.string().email(),
+  password: z.string(),
+});
+
+export type LoginRequest = z.infer<typeof LoginRequestSchema>;
+
+export const LoginRequestMapper = {
+  fromObject: (entity: object): LoginRequest => {
+    const result = LoginRequestSchema.safeParse(entity);
+    if (!result.success) {
+      throw new ModelMappingError(
+        "LoginRequest",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+  fromJSON: (jsonEntity: string): any => {
+    if (!jsonEntity) {
+      throw new ModelMappingError("LoginRequest", "Empty JSON string");
+    }
+    const result = LoginRequestSchema.safeParse(JSON.parse(jsonEntity));
+    if (!result.success) {
+      throw new ModelMappingError(
+        "LoginRequest",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+};
diff --git a/Client/reasn-client/packages/common/models/ParameterDto.ts b/Client/reasn-client/packages/common/src/schemas/ParameterDto.ts
similarity index 93%
rename from Client/reasn-client/packages/common/models/ParameterDto.ts
rename to Client/reasn-client/packages/common/src/schemas/ParameterDto.ts
index f35b0b7b..8006e2be 100644
--- a/Client/reasn-client/packages/common/models/ParameterDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/ParameterDto.ts
@@ -1,4 +1,4 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const ParameterDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/models/ParticipantDto.ts b/Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts
similarity index 83%
rename from Client/reasn-client/packages/common/models/ParticipantDto.ts
rename to Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts
index e9a50f1d..2f687e8b 100644
--- a/Client/reasn-client/packages/common/models/ParticipantDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts
@@ -1,10 +1,10 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { ParticipantStatus } from "@reasn/common/enums/modelsEnums";
+import ModelMappingError from "../errors/ModelMappingError";
+import { ParticipantStatus } from "../enums/schemasEnums";
 import { z } from "zod";
 
 export const ParticipantDtoSchema = z.object({
-  EventId: z.number(),
-  UserId: z.number(),
+  EventSlug: z.string(),
+  Username: z.string(),
   Status: z.nativeEnum(ParticipantStatus),
 });
 
diff --git a/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts b/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts
new file mode 100644
index 00000000..bb0ab075
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts
@@ -0,0 +1,58 @@
+import ModelMappingError from "../errors/ModelMappingError";
+import { AddressDtoSchema } from "../schemas/AddressDto";
+import { z } from "zod";
+
+export const RegisterRequestSchema = z.object({
+  name: z
+    .string()
+    .max(64)
+    .regex(/^[\p{L}\d._%+-]{4,}$/u),
+  surname: z
+    .string()
+    .max(64)
+    .regex(/^\p{L}+(?:[\s'-]\p{L}+)*$/u),
+  email: z.string().email(),
+  username: z
+    .string()
+    .max(64)
+    .regex(/^[\p{L}\d._%+-]{4,}$/u),
+  password: z
+    .string()
+    .regex(/^((?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9]).{6,})\S$/u),
+  phone: z
+    .string()
+    .regex(/^\+\d{1,3}\s\d{1,15}$/)
+    .nullable(),
+  address: AddressDtoSchema,
+  Role: z.enum(["User", "Organizer"]),
+});
+
+export type RegisterRequest = z.infer<typeof RegisterRequestSchema>;
+
+export const RegisterRequestMapper = {
+  fromObject: (entity: object): RegisterRequest => {
+    const result = RegisterRequestSchema.safeParse(entity);
+    if (!result.success) {
+      throw new ModelMappingError(
+        "RegisterRequest",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+  fromJSON: (jsonEntity: string): any => {
+    if (!jsonEntity) {
+      throw new ModelMappingError("RegisterRequest", "Empty JSON string");
+    }
+    const result = RegisterRequestSchema.safeParse(JSON.parse(jsonEntity));
+    if (!result.success) {
+      throw new ModelMappingError(
+        "RegisterRequest",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+};
diff --git a/Client/reasn-client/packages/common/models/TagDto.ts b/Client/reasn-client/packages/common/src/schemas/TagDto.ts
similarity index 91%
rename from Client/reasn-client/packages/common/models/TagDto.ts
rename to Client/reasn-client/packages/common/src/schemas/TagDto.ts
index 3b129d84..b48334ea 100644
--- a/Client/reasn-client/packages/common/models/TagDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/TagDto.ts
@@ -1,4 +1,4 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
+import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const TagDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/src/schemas/TokenPayload.ts b/Client/reasn-client/packages/common/src/schemas/TokenPayload.ts
new file mode 100644
index 00000000..7141efe7
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/schemas/TokenPayload.ts
@@ -0,0 +1,38 @@
+import ModelMappingError from "../errors/ModelMappingError";
+import { z } from "zod";
+
+export const TokenPayloadSchema = z.object({
+  tokenType: z.string(),
+  accessToken: z.string(),
+  expiresIn: z.number(),
+});
+
+export type TokenPayload = z.infer<typeof TokenPayloadSchema>;
+
+export const TokenPayloadMapper = {
+  fromObject: (entity: object): TokenPayload => {
+    const result = TokenPayloadSchema.safeParse(entity);
+    if (!result.success) {
+      throw new ModelMappingError(
+        "TokenPayload",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+  fromJSON: (jsonEntity: string): any => {
+    if (!jsonEntity) {
+      throw new ModelMappingError("TokenPayload", "Empty JSON string");
+    }
+    const result = TokenPayloadSchema.safeParse(JSON.parse(jsonEntity));
+    if (!result.success) {
+      throw new ModelMappingError(
+        "TokenPayload",
+        result.error.message,
+        result.error,
+      );
+    }
+    return result.data;
+  },
+};
diff --git a/Client/reasn-client/packages/common/models/UserDto.ts b/Client/reasn-client/packages/common/src/schemas/UserDto.ts
similarity index 83%
rename from Client/reasn-client/packages/common/models/UserDto.ts
rename to Client/reasn-client/packages/common/src/schemas/UserDto.ts
index e6f57ed0..7053027c 100644
--- a/Client/reasn-client/packages/common/models/UserDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/UserDto.ts
@@ -1,6 +1,7 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { UserInterestDtoSchema } from "@reasn/common/models/UserInterestDto";
-import { UserRole } from "@reasn/common/enums/modelsEnums";
+import ModelMappingError from "../errors/ModelMappingError";
+import { UserInterestDtoSchema } from "../schemas/UserInterestDto";
+import { AddressDtoSchema } from "../schemas/AddressDto";
+import { UserRole } from "../enums/schemasEnums";
 import { z } from "zod";
 
 export const UserDtoSchema = z.object({
@@ -23,6 +24,7 @@ export const UserDtoSchema = z.object({
     .refine((value) => value === null || /^\+\d{1,3}\s\d{1,15}$/.test(value)),
   Role: z.nativeEnum(UserRole),
   AddressId: z.number(),
+  Address: AddressDtoSchema,
   Intrests: z.array(UserInterestDtoSchema),
 });
 
diff --git a/Client/reasn-client/packages/common/models/UserInterestDto.ts b/Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts
similarity index 86%
rename from Client/reasn-client/packages/common/models/UserInterestDto.ts
rename to Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts
index d1db352f..c561e470 100644
--- a/Client/reasn-client/packages/common/models/UserInterestDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts
@@ -1,5 +1,5 @@
-import ModelMappingError from "@reasn/common/errors/ModelMappingError";
-import { InterestDtoSchema } from "@reasn/common/models/InterestDto";
+import ModelMappingError from "../errors/ModelMappingError";
+import { InterestDtoSchema } from "../schemas/InterestDto";
 import { z } from "zod";
 
 export const UserInterestDtoSchema = z.object({
diff --git a/Client/reasn-client/packages/common/services/apiServices.ts b/Client/reasn-client/packages/common/src/services/apiServices.ts
similarity index 80%
rename from Client/reasn-client/packages/common/services/apiServices.ts
rename to Client/reasn-client/packages/common/src/services/apiServices.ts
index a51cf5ac..93eab258 100644
--- a/Client/reasn-client/packages/common/services/apiServices.ts
+++ b/Client/reasn-client/packages/common/src/services/apiServices.ts
@@ -1,8 +1,14 @@
-import { getAuthDataFromSessionStorage } from "@reasn/common/services/authorizationServices";
-import { HttpMethod } from "@reasn/common/enums/serviceEnums";
-import ApiConnectionError from "@reasn/common/errors/ApiConnectionError";
+import { getAuthDataFromSessionStorage } from "../services/authorizationServices";
+import { HttpMethod } from "../enums/serviceEnums";
+import ApiConnectionError from "../errors/ApiConnectionError";
 import fetch from "cross-fetch";
-import ApiAuthorizationError from "@reasn/common/errors/ApiAuthorizationError";
+import ApiAuthorizationError from "../errors/ApiAuthorizationError";
+
+type FetchOptions = {
+  method: HttpMethod;
+  headers: { [key: string]: string };
+  body?: string;
+};
 
 /**
  * Sends an HTTP request to the specified URL.
@@ -21,7 +27,7 @@ export const sendRequest = async <T>(
   authRequired: boolean = false,
 ): Promise<T> => {
   try {
-    let headers = {};
+    let headers: { [key: string]: string } = {};
     if (authRequired) {
       const authData = getAuthDataFromSessionStorage();
       if (!authData) {
@@ -35,7 +41,7 @@ export const sendRequest = async <T>(
     const fetchOptions = {
       method: httpMethod,
       headers: headers,
-    };
+    } as FetchOptions;
 
     if (httpMethod === HttpMethod.POST || httpMethod === HttpMethod.PUT) {
       fetchOptions["body"] = JSON.stringify(bodyData);
diff --git a/Client/reasn-client/packages/common/services/authorizationServices.ts b/Client/reasn-client/packages/common/src/services/authorizationServices.ts
similarity index 89%
rename from Client/reasn-client/packages/common/services/authorizationServices.ts
rename to Client/reasn-client/packages/common/src/services/authorizationServices.ts
index a4c16ccc..07cb5128 100644
--- a/Client/reasn-client/packages/common/services/authorizationServices.ts
+++ b/Client/reasn-client/packages/common/src/services/authorizationServices.ts
@@ -1,5 +1,5 @@
-import { UserRole } from "@reasn/common/enums/modelsEnums";
-import { AuthData } from "@reasn/common/interfaces/AuthData";
+import { UserRole } from "../enums/schemasEnums";
+import { AuthData } from "../interfaces/AuthData";
 
 const AUTH_DATA_KEY = "REASN_AUTH_DATA";
 
diff --git a/Client/reasn-client/packages/common/tsconfig.json b/Client/reasn-client/packages/common/tsconfig.json
new file mode 100644
index 00000000..fddddc77
--- /dev/null
+++ b/Client/reasn-client/packages/common/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@reasn/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/Client/reasn-client/packages/ui/src/icons/Fire.tsx b/Client/reasn-client/packages/ui/src/icons/Fire.tsx
index 4ae6646b..19a04399 100644
--- a/Client/reasn-client/packages/ui/src/icons/Fire.tsx
+++ b/Client/reasn-client/packages/ui/src/icons/Fire.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { IconProps } from "./IconProps";
 
 export const Fire = (props: IconProps) => {
   const { className, colors, gradientTransform } = props;
diff --git a/Client/reasn-client/packages/ui/src/icons/IconProps.ts b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
index 15c96d35..b8283f2b 100644
--- a/Client/reasn-client/packages/ui/src/icons/IconProps.ts
+++ b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
@@ -1,4 +1,4 @@
-type IconProps = {
+export type IconProps = {
   className?: string;
   colors?: string[];
   gradientTransform?: string;
diff --git a/Client/reasn-client/yarn.lock b/Client/reasn-client/yarn.lock
index 0e2cc3a5..1326e348 100644
--- a/Client/reasn-client/yarn.lock
+++ b/Client/reasn-client/yarn.lock
@@ -4144,13 +4144,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reasn/common@workspace:packages/common":
+"@reasn/common@npm:*, @reasn/common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "@reasn/common@workspace:packages/common"
+  dependencies:
+    "@reasn/typescript-config": "workspace:*"
+    jest: "npm:^29.7.0"
+    jest-fetch-mock: "npm:^3.0.3"
+    typescript: "npm:^5.3.3"
+    zod: "npm:^3.23.7"
   languageName: unknown
   linkType: soft
 
-"@reasn/typescript-config@npm:*, @reasn/typescript-config@workspace:packages/typescript-config":
+"@reasn/typescript-config@npm:*, @reasn/typescript-config@workspace:*, @reasn/typescript-config@workspace:packages/typescript-config":
   version: 0.0.0-use.local
   resolution: "@reasn/typescript-config@workspace:packages/typescript-config"
   languageName: unknown
@@ -4764,6 +4770,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/url-search-params@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@types/url-search-params@npm:1.1.2"
+  checksum: 10c0/3575548b8d94b7f4509fc1645d4c32d75c12a180ed86a67d3521f730fcdddba67de9e43d282ff22d00cddf2dbc1dbb91b3e3cda698fdf3acd697c5124ebecd3e
+  languageName: node
+  linkType: hard
+
 "@types/ws@npm:^8.5.5":
   version: 8.5.10
   resolution: "@types/ws@npm:8.5.10"
@@ -11668,6 +11681,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jwt-decode@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "jwt-decode@npm:4.0.0"
+  checksum: 10c0/de75bbf89220746c388cf6a7b71e56080437b77d2edb29bae1c2155048b02c6b8c59a3e5e8d6ccdfd54f0b8bda25226e491a4f1b55ac5f8da04cfbadec4e546c
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.5.3":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -17452,15 +17472,18 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "web@workspace:apps/web"
   dependencies:
+    "@reasn/common": "npm:*"
     "@reasn/typescript-config": "npm:*"
     "@reasn/ui": "npm:*"
     "@types/node": "npm:^20.10.6"
     "@types/react": "npm:^18.2.46"
     "@types/react-dom": "npm:^18.2.18"
+    "@types/url-search-params": "npm:^1.1.2"
     babel-plugin-react-native-web: "npm:^0.19.10"
     eslint: "npm:^8.57.0"
     eslint-config-next: "npm:14.0.4"
     eslint-config-prettier: "npm:^9.1.0"
+    jwt-decode: "npm:^4.0.0"
     next: "npm:^14.1.1"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
diff --git a/Server/ReasnAPI/ReasnAPI/Services/EventService.cs b/Server/ReasnAPI/ReasnAPI/Services/EventService.cs
index 3e3d3709..835f45d4 100644
--- a/Server/ReasnAPI/ReasnAPI/Services/EventService.cs
+++ b/Server/ReasnAPI/ReasnAPI/Services/EventService.cs
@@ -20,9 +20,9 @@ public EventDto CreateEvent(EventDto eventDto)
             var newEvent = eventDto.ToEntity();
             newEvent.CreatedAt = createdTime;
             newEvent.UpdatedAt = createdTime;
-            newEvent.Slug = CreateSlug(eventDto);
-            
-
+            newEvent.Slug = CreateSlug(eventDto);
+
+
             context.Events.Add(newEvent);
 
             context.SaveChanges();
diff --git a/Server/ReasnAPI/ReasnAPI/Services/ParameterService.cs b/Server/ReasnAPI/ReasnAPI/Services/ParameterService.cs
index f38c8534..50b75343 100644
--- a/Server/ReasnAPI/ReasnAPI/Services/ParameterService.cs
+++ b/Server/ReasnAPI/ReasnAPI/Services/ParameterService.cs
@@ -35,7 +35,7 @@ public ParameterDto UpdateParameter(int parameterId, ParameterDto parameterDto)
 
         var parameterCheck = parameters.FirstOrDefault(r => r.Parameters.Any(p => p.Id == parameterId));
 
-        if (parameterCheck is not null) 
+        if (parameterCheck is not null)
         {
             throw new BadRequestException("Parameter is associated with an event");
         }

From 94d0f6a06f5262274625ab3b3bd4abac92e00214 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 02:11:03 +0200
Subject: [PATCH 05/13] [RSN-71] - Implemented event browse page (#67)

---
 .../apps/web/app/events/[slug]/edit/page.tsx  |  24 +--
 .../apps/web/app/events/layout.tsx            |   6 +-
 .../apps/web/app/events/new/page.tsx          |  21 +--
 .../reasn-client/apps/web/app/events/page.tsx | 148 ++++++++++++++++++
 .../reasn-client/apps/web/tailwind.config.js  |   6 +-
 .../common/{ => src}/helpers/uiHelpers.ts     |   2 +-
 .../ui/src/components/shared/Card.tsx         |   2 +
 .../ui/src/components/shared/Comment.tsx      |   5 +-
 .../src/components/shared/form/Dropdown.tsx   |   6 +-
 .../src/components/web/main/QuickFilters.tsx  |   2 +-
 .../packages/ui/tailwind.config.js            |   6 +-
 11 files changed, 196 insertions(+), 32 deletions(-)
 create mode 100644 Client/reasn-client/apps/web/app/events/page.tsx
 rename Client/reasn-client/packages/common/{ => src}/helpers/uiHelpers.ts (89%)

diff --git a/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
index 963aeb45..cd27ed6e 100644
--- a/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
+++ b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
@@ -12,9 +12,9 @@ import { ChangeEvent, useState } from "react";
 import { ArrowLeft, Clock, Location, Upload } from "@reasn/ui/src/icons";
 import { useRouter } from "next/navigation";
 import clsx from "clsx";
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
 import { BaseInput } from "@reasn/ui/src/components/shared/form/Input";
-import { getStatusClass } from "@reasn/common/helpers/uiHelpers";
+import { getStatusClass } from "@reasn/common/src/helpers/uiHelpers";
 
 const IMAGES = [
   "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
@@ -28,7 +28,7 @@ const IMAGES = [
   "https://images.pexels.com/photos/54332/currant-immature-bush-berry-54332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
 ];
 
-const MOCK_TAGS = [
+export const MOCK_TAGS = [
   "abcd",
   "efgh",
   "ijkl",
@@ -155,7 +155,7 @@ const EventEditPage = ({ params }: { params: { slug: string } }) => {
               />
             </div>
           )}
-          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+          <div className="mt-8 flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
             <SearchMultiDropdown
               label="Wyszukaj tagi"
               options={MOCK_TAGS}
@@ -252,13 +252,15 @@ const EventEditPage = ({ params }: { params: { slug: string } }) => {
               </div>
             </div>
             <div>
-              <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
-              <SearchMultiDropdown
-                label="Wyszukaj parametry"
-                options={Object.keys(MOCK_PARAMS)}
-                selectedOptions={paramsKeys}
-                setSelectedOptions={setParamsKeys}
-              />
+              <h3 className="mb-1font-semibold">Dodatkowe informacje:</h3>
+              <div className="mt-8">
+                <SearchMultiDropdown
+                  label="Wyszukaj parametry"
+                  options={Object.keys(MOCK_PARAMS)}
+                  selectedOptions={paramsKeys}
+                  setSelectedOptions={setParamsKeys}
+                />
+              </div>
               <div className="ml-5 mt-2 flex flex-col gap-1">
                 <h3 className="font-semibold">Wybrane parametry:</h3>
                 {paramsKeys?.map((key, idx) => (
diff --git a/Client/reasn-client/apps/web/app/events/layout.tsx b/Client/reasn-client/apps/web/app/events/layout.tsx
index c9ac1139..d6bb544c 100644
--- a/Client/reasn-client/apps/web/app/events/layout.tsx
+++ b/Client/reasn-client/apps/web/app/events/layout.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-const EventLayout = ({
+const EventsLayout = ({
   children,
   params,
 }: {
@@ -11,10 +11,10 @@ const EventLayout = ({
   };
 }) => {
   return (
-    <section className="relative mx-auto flex min-h-screen w-[90%] justify-between py-10 sm:w-3/4">
+    <section className="relative mx-auto flex min-h-screen w-[90%] justify-between py-10 xl:w-3/4">
       {children}
     </section>
   );
 };
 
-export default EventLayout;
+export default EventsLayout;
diff --git a/Client/reasn-client/apps/web/app/events/new/page.tsx b/Client/reasn-client/apps/web/app/events/new/page.tsx
index f21f820b..1ed95c4c 100644
--- a/Client/reasn-client/apps/web/app/events/new/page.tsx
+++ b/Client/reasn-client/apps/web/app/events/new/page.tsx
@@ -8,11 +8,10 @@ import {
 } from "@reasn/ui/src/components/shared/form";
 import { ChangeEvent, useState } from "react";
 import { Clock, Location, Upload } from "@reasn/ui/src/icons";
-import { useRouter } from "next/navigation";
 import clsx from "clsx";
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
 import { BaseInput } from "@reasn/ui/src/components/shared/form/Input";
-import { getStatusClass } from "@reasn/common/helpers/uiHelpers";
+import { getStatusClass } from "@reasn/common/src/helpers/uiHelpers";
 
 const MOCK_TAGS = [
   "abcd",
@@ -94,7 +93,7 @@ const EventAddPage = () => {
           >
             {status}
           </p>
-          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+          <div className="mt-8 flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
             <SearchMultiDropdown
               label="Wyszukaj tagi"
               options={MOCK_TAGS}
@@ -184,12 +183,14 @@ const EventAddPage = () => {
             </div>
             <div>
               <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
-              <SearchMultiDropdown
-                label="Wyszukaj parametry"
-                options={Object.keys(MOCK_PARAMS)}
-                selectedOptions={paramsKeys}
-                setSelectedOptions={setParamsKeys}
-              />
+              <div className="mt-8">
+                <SearchMultiDropdown
+                  label="Wyszukaj parametry"
+                  options={Object.keys(MOCK_PARAMS)}
+                  selectedOptions={paramsKeys}
+                  setSelectedOptions={setParamsKeys}
+                />
+              </div>
               <div className="ml-5 mt-2 flex flex-col gap-1">
                 <h3 className="font-semibold">Wybrane parametry:</h3>
                 {!paramsKeys ||
diff --git a/Client/reasn-client/apps/web/app/events/page.tsx b/Client/reasn-client/apps/web/app/events/page.tsx
new file mode 100644
index 00000000..70808736
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/events/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
+import { Card, CardVariant } from "@reasn/ui/src/components/shared";
+import {
+  FloatingInput,
+  SearchMultiDropdown,
+  SingleDropdown,
+} from "@reasn/ui/src/components/shared/form";
+import { ArrowLeft, ArrowRight, Clock } from "@reasn/ui/src/icons";
+import { useState } from "react";
+import { MOCK_TAGS } from "./[slug]/edit/page";
+import clsx from "clsx";
+
+const EventsPage = () => {
+  const [selectedSortBy, setSelectedSortBy] = useState<string>("tytuł");
+  const [selectedSortOrder, setSelectedSortOrder] = useState<string>("rosnąco");
+  const [selectedStatus, setSelectedStatus] = useState<string>("wszystkie");
+  const [selectViewMode, setSelectViewMode] = useState<string>("kafelki");
+  const [tags, setTags] = useState<string[]>(MOCK_TAGS.slice(0, 5));
+  const [selectedPage, setSelectedPage] = useState<number>(1);
+  const cardVariant =
+    selectViewMode === "kafelki" ? CardVariant.Tile : CardVariant.List;
+
+  return (
+    <div className="relative flex w-full flex-col">
+      <div className="absolute right-[-50%] top-[-10vh] z-0 h-[80vh] w-[200%] rounded-full bg-gradient-to-r from-[#FF6363] to-[#1E34FF] opacity-10 blur-3xl duration-1000"></div>
+      <h1 className="h-[5rem] w-fit content-center bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold text-transparent">
+        Wydarzenia
+      </h1>
+      <div className="flex w-full flex-col justify-center gap-10 lg:flex-row">
+        <div className="flex h-full min-h-[50vh] w-full flex-col justify-start gap-8 rounded-lg bg-[#1E1F296d] p-5 backdrop-blur-lg xl:w-[25vw] xl:min-w-[25vw]">
+          <h3 className="text-2xl font-semibold">Filtry:</h3>
+          <div className="flex flex-row items-center gap-2">
+            <FloatingInput
+              label="Szukaj w tekście"
+              type="text"
+              name="searchText"
+              className="grow"
+            />
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <Clock className="h-5 w-5 fill-slate-400" />
+            <FloatingInput
+              label="Data od"
+              type="date"
+              name="dateFrom"
+              className="grow"
+            />
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <Clock className="h-5 w-5 fill-slate-400" />
+            <FloatingInput
+              label="Data do"
+              type="date"
+              name="dateTo"
+              className="grow"
+            />
+          </div>
+          <div className="flex flex-col items-start gap-2">
+            <h4>Status:</h4>
+            <SingleDropdown
+              label="Sortowanie"
+              options={["wszystkie", ...Object.values(EventStatus)]}
+              selectedOption={selectedStatus}
+              setSelectedOption={setSelectedStatus}
+            />
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <SearchMultiDropdown
+              label="Wyszukaj tagi"
+              options={MOCK_TAGS}
+              selectedOptions={tags}
+              setSelectedOptions={setTags}
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-5">
+          <div className="flex w-full flex-row items-center justify-start gap-10">
+            <div className="flex w-1/4 flex-row items-center gap-5">
+              <h3>widok:</h3>
+              <SingleDropdown
+                label="Widok"
+                options={["kafelki", "lista"]}
+                selectedOption={selectViewMode}
+                setSelectedOption={setSelectViewMode}
+              />
+            </div>
+            <div className="ml-auto flex w-1/2 flex-row items-center gap-5 self-end">
+              <h3>sortowanie:</h3>
+              <SingleDropdown
+                label="Sortowanie"
+                options={["rosnąco", "malejąco"]}
+                selectedOption={selectedSortOrder}
+                setSelectedOption={setSelectedSortOrder}
+              />
+              <SingleDropdown
+                label="Sortowanie"
+                options={["data od", "tytuł"]}
+                selectedOption={selectedSortBy}
+                setSelectedOption={setSelectedSortBy}
+              />
+            </div>
+          </div>
+          <div
+            className={clsx(
+              {
+                "xs:grid-cols-2 grid grid-cols-1 place-items-center gap-2 sm:grid-cols-3 sm:gap-10 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4":
+                  cardVariant === CardVariant.Tile,
+              },
+              { "flex flex-col gap-5": cardVariant === CardVariant.List },
+            )}
+          >
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((idx) => (
+              <Card variant={cardVariant} event="Abc" key={idx} />
+            ))}
+          </div>
+          <div className="flex w-full items-center justify-center gap-5">
+            {selectedPage > 1 && (
+              <ArrowLeft
+                className="h-10 w-10 cursor-pointer fill-slate-400 p-2"
+                onClick={() => setSelectedPage(selectedPage - 1)}
+              />
+            )}
+            {[1, 2, 3].map((idx) => (
+              <p
+                key={idx}
+                className={clsx("cursor-pointer px-2 py-1 text-lg", {
+                  "rounded-lg bg-[#4E4F75] text-black": selectedPage === idx,
+                })}
+              >
+                {idx}
+              </p>
+            ))}
+            {selectedPage < 3 && (
+              <ArrowRight
+                className="h-10 w-10 cursor-pointer fill-slate-400 p-2"
+                onClick={() => setSelectedPage(selectedPage + 1)}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventsPage;
diff --git a/Client/reasn-client/apps/web/tailwind.config.js b/Client/reasn-client/apps/web/tailwind.config.js
index ef1ecc98..6ca42768 100644
--- a/Client/reasn-client/apps/web/tailwind.config.js
+++ b/Client/reasn-client/apps/web/tailwind.config.js
@@ -8,7 +8,11 @@ module.exports = {
     "../../packages/ui/src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "460px",
+      },
+    },
   },
   plugins: [],
 };
diff --git a/Client/reasn-client/packages/common/helpers/uiHelpers.ts b/Client/reasn-client/packages/common/src/helpers/uiHelpers.ts
similarity index 89%
rename from Client/reasn-client/packages/common/helpers/uiHelpers.ts
rename to Client/reasn-client/packages/common/src/helpers/uiHelpers.ts
index 9978becc..e34ce1ad 100644
--- a/Client/reasn-client/packages/common/helpers/uiHelpers.ts
+++ b/Client/reasn-client/packages/common/src/helpers/uiHelpers.ts
@@ -1,4 +1,4 @@
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
 
 export const getStatusClass = (status: EventStatus) => {
   switch (status) {
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
index 56b8ca47..73a92e01 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { useRouter } from "next/navigation";
 
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
index f10838a2..c2bceb92 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import { CommentDto, CommentDtoMapper } from "@reasn/common/models/CommentDto";
+import {
+  CommentDto,
+  CommentDtoMapper,
+} from "@reasn/common/src/schemas/CommentDto";
 
 interface CommentProps {
   comment: CommentDto;
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
index c35de5ab..834786de 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
@@ -41,7 +41,7 @@ export const SearchMultiDropdown = (props: MultiDropdownProps) => {
   };
 
   return (
-    <div className="mt-8 flex w-full flex-col gap-2">
+    <div className="flex w-full flex-col gap-2">
       <FloatingInput
         type="text"
         label={label}
@@ -119,7 +119,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => {
     >
       <div
         className={clsx(
-          "flex w-full items-center justify-between p-2",
+          "pointer-events-none flex w-full items-center justify-between p-2",
           selectedOptionClass ?? "",
         )}
       >
@@ -132,7 +132,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => {
       </div>
       <div
         className={clsx(
-          "absolute top-[100%] z-20 h-24 w-full flex-col justify-start overflow-auto rounded-b-lg bg-[#232327] text-xs",
+          "absolute top-[100%] z-20 max-h-24 w-full flex-col justify-start overflow-auto rounded-b-lg bg-[#232327] text-xs",
           { hidden: !isExpanded },
           { flex: isExpanded },
         )}
diff --git a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
index 380fbec1..4a95ce2d 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
@@ -51,7 +51,7 @@ export const QuickFilters = () => {
           selected={selectedFilter === "Remote"}
         />
       </div>
-      <div className="grid grid-cols-1 place-items-center gap-10 p-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+      <div className="xs:grid-cols-2 grid grid-cols-1 place-items-center gap-2 p-10 sm:gap-10 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />
diff --git a/Client/reasn-client/packages/ui/tailwind.config.js b/Client/reasn-client/packages/ui/tailwind.config.js
index 37cc6514..54061748 100644
--- a/Client/reasn-client/packages/ui/tailwind.config.js
+++ b/Client/reasn-client/packages/ui/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "460px",
+      },
+    },
   },
   plugins: [],
 };

From 656a913bba6992aeb48b65d59a44dd77f24e8393 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 14:46:29 +0200
Subject: [PATCH 06/13] [RSN-72] - Login/register logic (#69)

* feat: add login and register logic to components

TODO: Add same logic to organizer registration.

* feat: changed register page styling, added error handling

* chore: linting

---------

Co-authored-by: raczu <Raczuekk@gmail.com>
---
 Client/reasn-client/apps/web/.env.sample      |   1 +
 .../reasn-client/apps/web/app/login/action.ts |  40 ++
 .../reasn-client/apps/web/app/login/page.tsx  |  40 +-
 .../apps/web/app/register/action.ts           |  62 +++
 .../apps/web/app/register/organizer/page.tsx  | 215 +++++++--
 .../apps/web/app/register/user/page.tsx       | 213 ++++++--
 Client/reasn-client/apps/web/lib/request.ts   |   2 +-
 Client/reasn-client/apps/web/lib/session.ts   |   2 +-
 Client/reasn-client/package.json              |   2 +-
 .../__tests__/schemas/AddressDto.test.ts      | 130 ++---
 .../common/__tests__/schemas/UserDto.test.ts  | 454 +++++++++---------
 .../common/src/helpers/errorHelpers.ts        |  45 ++
 .../packages/common/src/schemas/AddressDto.ts |  10 +-
 .../common/src/schemas/RegisterRequest.ts     |   2 +-
 .../packages/common/src/schemas/UserDto.ts    |  18 +-
 .../ui/src/components/shared/Toast.tsx        |  17 +
 .../ui/src/components/shared/form/Button.tsx  |   8 +-
 .../ui/src/components/shared/form/Input.tsx   |  29 +-
 .../ui/src/components/shared/index.tsx        |   1 +
 Client/reasn-client/yarn.lock                 |  60 +--
 20 files changed, 891 insertions(+), 460 deletions(-)
 create mode 100644 Client/reasn-client/apps/web/.env.sample
 create mode 100644 Client/reasn-client/apps/web/app/login/action.ts
 create mode 100644 Client/reasn-client/apps/web/app/register/action.ts
 create mode 100644 Client/reasn-client/packages/common/src/helpers/errorHelpers.ts
 create mode 100644 Client/reasn-client/packages/ui/src/components/shared/Toast.tsx

diff --git a/Client/reasn-client/apps/web/.env.sample b/Client/reasn-client/apps/web/.env.sample
new file mode 100644
index 00000000..148087c9
--- /dev/null
+++ b/Client/reasn-client/apps/web/.env.sample
@@ -0,0 +1 @@
+REASN_API_URL=https://localhost:5272
\ No newline at end of file
diff --git a/Client/reasn-client/apps/web/app/login/action.ts b/Client/reasn-client/apps/web/app/login/action.ts
new file mode 100644
index 00000000..8a901da2
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/login/action.ts
@@ -0,0 +1,40 @@
+"use server";
+
+import { LoginRequestSchema } from "@reasn/common/src/schemas/LoginRequest";
+import { login } from "@/services/auth";
+import { setToken } from "@/lib/token";
+import { redirect } from "next/navigation";
+import {
+  formatZodError,
+  handleErrorMessage,
+} from "@reasn/common/src/helpers/errorHelpers";
+
+export type LoginFormState = {
+  message?: string | null;
+  errors?: string | {};
+};
+
+export const loginAction = async (
+  prevState: any,
+  formData: FormData,
+): Promise<LoginFormState | undefined> => {
+  const result = LoginRequestSchema.safeParse({
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+
+  if (!result.success) {
+    return {
+      errors: formatZodError(result.error),
+      message: "Niepoprawne wartości formularza.",
+    };
+  }
+
+  try {
+    const payload = await login(result.data);
+    setToken(payload);
+    redirect("/");
+  } catch (e) {
+    return handleErrorMessage(e);
+  }
+};
diff --git a/Client/reasn-client/apps/web/app/login/page.tsx b/Client/reasn-client/apps/web/app/login/page.tsx
index c9e0f136..582d690d 100644
--- a/Client/reasn-client/apps/web/app/login/page.tsx
+++ b/Client/reasn-client/apps/web/app/login/page.tsx
@@ -5,20 +5,40 @@ import {
   FloatingInput,
 } from "@reasn/ui/src/components/shared/form";
 import Link from "next/link";
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useFormState } from "react-dom";
+import { LoginFormState, loginAction } from "@/app/login/action";
+import { Toast } from "@reasn/ui/src/components/shared";
 
 const LoginPage = () => {
+  const initialState = { message: null, errors: {} };
   const formRef = useRef<HTMLFormElement>(null);
+  const [state, formAction] = useFormState(loginAction, initialState);
+  const [error, setError] = useState<LoginFormState>({});
 
-  const handleFormSubmit = () => {
-    console.log("form submitted");
-    formRef.current?.submit();
+  const handleFormAction = async (formData: FormData) => {
+    const res = await loginAction(state, formData);
+    if (res?.message) {
+      setError(res);
+    }
   };
 
+  useEffect(() => {
+    if (error?.message) {
+      setTimeout(() => {
+        setError({});
+      }, 5000);
+    }
+  }, [error]);
+
   return (
     <>
       <div className="relative z-10 flex w-full items-center justify-center sm:w-1/2">
-        <form className="flex w-full flex-col gap-2 sm:gap-8" ref={formRef}>
+        <form
+          className="flex w-full flex-col gap-2 sm:gap-8"
+          ref={formRef}
+          action={handleFormAction}
+        >
           <FloatingInput type="email" label="email" name="email" />
           <FloatingInput type="password" label="hasło" name="password" />
           <div className="flex justify-end gap-2 text-sm">
@@ -33,9 +53,17 @@ const LoginPage = () => {
         <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
           miło, że do nas wracasz
         </p>
-        <ButtonBase text={"zaloguj"} onClick={handleFormSubmit} />
+        <ButtonBase
+          text={"zaloguj"}
+          onClick={() => formRef.current?.requestSubmit()}
+        />
       </div>
       <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+      <div className="absolute right-10 top-10">
+        {error?.message && (
+          <Toast message={error.message} errors={error.errors as string} />
+        )}
+      </div>
     </>
   );
 };
diff --git a/Client/reasn-client/apps/web/app/register/action.ts b/Client/reasn-client/apps/web/app/register/action.ts
new file mode 100644
index 00000000..c7b6bb7c
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/register/action.ts
@@ -0,0 +1,62 @@
+"use server";
+
+import {
+  RegisterRequestSchema,
+  RegisterRequestMapper,
+} from "@reasn/common/src/schemas/RegisterRequest";
+import { register } from "@/services/auth";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+import {
+  formatZodError,
+  handleErrorMessage,
+} from "@reasn/common/src/helpers/errorHelpers";
+
+export type RegisterFormState = {
+  message?: string | null;
+  errors?: string | {};
+};
+
+const RegisterRequestExtendedSchema = RegisterRequestSchema.extend({
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword);
+
+export type RegisterFormData = z.infer<typeof RegisterRequestExtendedSchema>;
+
+export const registerAction = async (
+  prevState: any,
+  formData: FormData,
+): Promise<RegisterFormState | undefined> => {
+  const result = RegisterRequestExtendedSchema.safeParse({
+    name: formData.get("name"),
+    surname: formData.get("surname"),
+    email: formData.get("email"),
+    username: formData.get("username"),
+    password: formData.get("password"),
+    confirmPassword: formData.get("confirmPassword"),
+    phone: formData.get("phone"),
+    address: {
+      country: formData.get("country"),
+      city: formData.get("city"),
+      street: formData.get("street"),
+      state: formData.get("state"),
+      zipCode: formData.get("postcode"),
+    },
+    role: formData.get("role"),
+  });
+
+  if (!result.success) {
+    console.log(result.error);
+    return {
+      errors: formatZodError(result.error),
+      message: "Niepoprawne wartości formularza.",
+    };
+  }
+
+  try {
+    await register(RegisterRequestMapper.fromObject(result.data));
+    redirect("/login");
+  } catch (e) {
+    return handleErrorMessage(e);
+  }
+};
diff --git a/Client/reasn-client/apps/web/app/register/organizer/page.tsx b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
index be2f7ce2..2f519710 100644
--- a/Client/reasn-client/apps/web/app/register/organizer/page.tsx
+++ b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
@@ -4,72 +4,181 @@ import {
   ButtonBase,
   FloatingInput,
 } from "@reasn/ui/src/components/shared/form";
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, ChangeEvent, useEffect } from "react";
+import { useFormState } from "react-dom";
+import { RegisterFormState, registerAction } from "@/app/register/action";
+import { UserRole } from "@reasn/common/src/enums/schemasEnums";
+import { Toast } from "@reasn/ui/src/components/shared";
 
 const RegisterOrganizer = () => {
+  const initialState = { message: null, errors: {} };
   const [currentStep, setCurrentStep] = useState(1);
-  const formRef = useRef<HTMLFormElement>(null);
+  const [state, formAction] = useFormState(registerAction, initialState);
+  const [formData, setFormData] = useState({
+    name: "",
+    surname: "",
+    email: "",
+    username: "",
+    password: "",
+    confirmPassword: "",
+    phone: "",
+    country: "",
+    city: "",
+    street: "",
+    state: "",
+    postcode: "",
+    role: UserRole.ORGANIZER,
+  });
+  const [error, setError] = useState<RegisterFormState>({});
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
 
-  const handleFormSubmit = () => {
-    console.log("form submitted");
-    formRef.current?.submit();
+  const handleFormAction = async (formData: FormData) => {
+    const res = await registerAction(state, formData);
+    if (res?.message) {
+      setError(res);
+    }
   };
 
+  useEffect(() => {
+    if (error?.message) {
+      setTimeout(() => {
+        setError({});
+      }, 5000);
+    }
+  }, [error]);
+
+  const formRef = useRef<HTMLFormElement>(null);
+
   return (
     <>
-      <div className="relative z-10 flex w-full items-center justify-center sm:w-1/2">
-        <form className="flex w-full flex-col gap-8" ref={formRef}>
-          {currentStep === 1 && (
-            <>
-              <FloatingInput type="text" label="imię" name="name" />
-              <FloatingInput type="text" label="nazwisko" name="surname" />
-              <FloatingInput
-                type="text"
-                label="nazwa użytkownika"
-                name="username"
-              />
-              <FloatingInput type="email" label="email" name="email" />
-              <FloatingInput type="tel" label="numer telefonu" name="phone" />
-              <FloatingInput type="password" label="hasło" name="password" />
-              <FloatingInput
-                type="password"
-                label="powtórz hasło"
-                name="confirm-password"
-              />
-            </>
-          )}
-          {currentStep === 2 && (
-            <>
-              <FloatingInput type="text" label="miasto" name="city" />
-              <FloatingInput type="text" label="kraj" name="country" />
-              <FloatingInput type="text" label="ulica" name="street" />
-              <FloatingInput type="text" label="województwo" name="state" />
-              <FloatingInput type="text" label="kod pocztowy" name="postcode" />
-            </>
-          )}
+      <div className="flex w-full items-center justify-center sm:w-1/2">
+        <form
+          className="flex w-full flex-col gap-8"
+          ref={formRef}
+          action={handleFormAction}
+        >
+          <FloatingInput
+            type={currentStep === 1 ? "text" : "hidden"}
+            label="imię"
+            name="name"
+            defaultValue={formData.name}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "text" : "hidden"}
+            label="nazwisko"
+            name="surname"
+            defaultValue={formData.surname}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "text" : "hidden"}
+            label="nazwa użytkownika"
+            name="username"
+            defaultValue={formData.username}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "email" : "hidden"}
+            label="email"
+            name="email"
+            defaultValue={formData.email}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "tel" : "hidden"}
+            label="numer telefonu"
+            name="phone"
+            defaultValue={formData.phone}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "password" : "hidden"}
+            label="hasło"
+            name="password"
+            defaultValue={formData.password}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "password" : "hidden"}
+            label="powtórz hasło"
+            name="confirmPassword"
+            defaultValue={formData.confirmPassword}
+            onChange={handleChange}
+          />
+          <input type="hidden" name="role" defaultValue={formData.role} />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="miasto"
+            name="city"
+            defaultValue={formData.city}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="kraj"
+            name="country"
+            defaultValue={formData.country}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="ulica"
+            name="street"
+            defaultValue={formData.street}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="województwo"
+            name="state"
+            defaultValue={formData.state}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="kod pocztowy"
+            name="postcode"
+            defaultValue={formData.postcode}
+            onChange={handleChange}
+          />
         </form>
       </div>
       <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
-        {currentStep === 1 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
-            to jak, zorganizujesz nam coś?
-          </p>
-        )}
-        {currentStep === 2 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
-            gdzie możemy cię znaleźć?
-          </p>
-        )}
-        <ButtonBase
-          text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
-          onClick={() =>
-            currentStep === 2
-              ? handleFormSubmit()
-              : setCurrentStep(currentStep + 1)
-          }
-        />
+        <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
+          {currentStep === 1
+            ? "to jak, zorganizujesz nam coś?"
+            : "gdzie możemy cię znaleźć?"}
+        </p>
+        <div className="flex flex-row gap-5">
+          {currentStep > 1 && (
+            <ButtonBase
+              text={"wróć"}
+              onClick={() => setCurrentStep(currentStep - 1)}
+            />
+          )}
+          <ButtonBase
+            text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
+            onClick={() =>
+              currentStep === 2
+                ? formRef.current?.requestSubmit()
+                : setCurrentStep(currentStep + 1)
+            }
+          />
+        </div>
       </div>
       <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+      <div className="absolute right-10 top-10">
+        {error?.message && (
+          <Toast message={error.message} errors={error.errors as string} />
+        )}
+      </div>
     </>
   );
 };
diff --git a/Client/reasn-client/apps/web/app/register/user/page.tsx b/Client/reasn-client/apps/web/app/register/user/page.tsx
index 78431412..a7fdae40 100644
--- a/Client/reasn-client/apps/web/app/register/user/page.tsx
+++ b/Client/reasn-client/apps/web/app/register/user/page.tsx
@@ -4,72 +4,181 @@ import {
   ButtonBase,
   FloatingInput,
 } from "@reasn/ui/src/components/shared/form";
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, ChangeEvent, useEffect } from "react";
+import { useFormState } from "react-dom";
+import { RegisterFormState, registerAction } from "@/app/register/action";
+import { UserRole } from "@reasn/common/src/enums/schemasEnums";
+import { Toast } from "@reasn/ui/src/components/shared";
 
 const RegisterUser = () => {
+  const initialState = { message: null, errors: {} };
   const [currentStep, setCurrentStep] = useState(1);
-  const formRef = useRef<HTMLFormElement>(null);
+  const [state, formAction] = useFormState(registerAction, initialState);
+  const [formData, setFormData] = useState({
+    name: "",
+    surname: "",
+    email: "",
+    username: "",
+    password: "",
+    confirmPassword: "",
+    phone: "",
+    country: "",
+    city: "",
+    street: "",
+    state: "",
+    postcode: "",
+    role: UserRole.USER,
+  });
+  const [error, setError] = useState<RegisterFormState>({});
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
 
-  const handleFormSubmit = () => {
-    console.log("form submitted");
-    formRef.current?.submit();
+  const handleFormAction = async (formData: FormData) => {
+    const res = await registerAction(state, formData);
+    if (res?.message) {
+      setError(res);
+    }
   };
 
+  useEffect(() => {
+    if (error?.message) {
+      setTimeout(() => {
+        setError({});
+      }, 5000);
+    }
+  }, [error]);
+
+  const formRef = useRef<HTMLFormElement>(null);
+
   return (
     <>
       <div className="flex w-full items-center justify-center sm:w-1/2">
-        <form className="flex w-full flex-col gap-8" ref={formRef}>
-          {currentStep === 1 && (
-            <>
-              <FloatingInput type="text" label="imię" name="name" />
-              <FloatingInput type="text" label="nazwisko" name="surname" />
-              <FloatingInput
-                type="text"
-                label="nazwa użytkownika"
-                name="username"
-              />
-              <FloatingInput type="email" label="email" name="email" />
-              <FloatingInput type="tel" label="numer telefonu" name="phone" />
-              <FloatingInput type="password" label="hasło" name="password" />
-              <FloatingInput
-                type="password"
-                label="powtórz hasło"
-                name="confirm-password"
-              />
-            </>
-          )}
-          {currentStep === 2 && (
-            <>
-              <FloatingInput type="text" label="miasto" name="city" />
-              <FloatingInput type="text" label="kraj" name="country" />
-              <FloatingInput type="text" label="ulica" name="street" />
-              <FloatingInput type="text" label="województwo" name="state" />
-              <FloatingInput type="text" label="kod pocztowy" name="postcode" />
-            </>
-          )}
+        <form
+          className="flex w-full flex-col gap-8"
+          ref={formRef}
+          action={handleFormAction}
+        >
+          <FloatingInput
+            type={currentStep === 1 ? "text" : "hidden"}
+            label="imię"
+            name="name"
+            defaultValue={formData.name}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "text" : "hidden"}
+            label="nazwisko"
+            name="surname"
+            defaultValue={formData.surname}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "text" : "hidden"}
+            label="nazwa użytkownika"
+            name="username"
+            defaultValue={formData.username}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "email" : "hidden"}
+            label="email"
+            name="email"
+            defaultValue={formData.email}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "tel" : "hidden"}
+            label="numer telefonu"
+            name="phone"
+            defaultValue={formData.phone}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "password" : "hidden"}
+            label="hasło"
+            name="password"
+            defaultValue={formData.password}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 1 ? "password" : "hidden"}
+            label="powtórz hasło"
+            name="confirmPassword"
+            defaultValue={formData.confirmPassword}
+            onChange={handleChange}
+          />
+          <input type="hidden" name="role" defaultValue={formData.role} />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="miasto"
+            name="city"
+            defaultValue={formData.city}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="kraj"
+            name="country"
+            defaultValue={formData.country}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="ulica"
+            name="street"
+            defaultValue={formData.street}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="województwo"
+            name="state"
+            defaultValue={formData.state}
+            onChange={handleChange}
+          />
+          <FloatingInput
+            type={currentStep === 2 ? "text" : "hidden"}
+            label="kod pocztowy"
+            name="postcode"
+            defaultValue={formData.postcode}
+            onChange={handleChange}
+          />
         </form>
       </div>
       <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
-        {currentStep === 1 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
-            znalazłeś już swój powód do spotkań?
-          </p>
-        )}
-        {currentStep === 2 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
-            gdzie powinniśmy cię szukać?
-          </p>
-        )}
-        <ButtonBase
-          text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
-          onClick={() =>
-            currentStep === 2
-              ? handleFormSubmit()
-              : setCurrentStep(currentStep + 1)
-          }
-        />
+        <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
+          {currentStep === 1
+            ? "znalazłeś już swój powód do spotkań?"
+            : "gdzie powinniśmy cię szukać?"}
+        </p>
+        <div className="flex flex-row gap-5">
+          {currentStep > 1 && (
+            <ButtonBase
+              text={"wróć"}
+              onClick={() => setCurrentStep(currentStep - 1)}
+            />
+          )}
+          <ButtonBase
+            text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
+            onClick={() =>
+              currentStep === 2
+                ? formRef.current?.requestSubmit()
+                : setCurrentStep(currentStep + 1)
+            }
+          />
+        </div>
       </div>
       <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+      <div className="absolute right-10 top-10">
+        {error?.message && (
+          <Toast message={error.message} errors={error.errors as string} />
+        )}
+      </div>
     </>
   );
 };
diff --git a/Client/reasn-client/apps/web/lib/request.ts b/Client/reasn-client/apps/web/lib/request.ts
index 05c26ba1..cbed62d3 100644
--- a/Client/reasn-client/apps/web/lib/request.ts
+++ b/Client/reasn-client/apps/web/lib/request.ts
@@ -74,6 +74,6 @@ export const sendRequest = async <T>(
     console.error(
       `Error while sending request to ${url} with method ${method}: ${error}`,
     );
-    throw Error;
+    throw Error(`Error while sending request to ${url}`);
   }
 };
diff --git a/Client/reasn-client/apps/web/lib/session.ts b/Client/reasn-client/apps/web/lib/session.ts
index ecdde0e4..d1bf8c64 100644
--- a/Client/reasn-client/apps/web/lib/session.ts
+++ b/Client/reasn-client/apps/web/lib/session.ts
@@ -1,5 +1,5 @@
 import { jwtDecode, JwtPayload } from "jwt-decode";
-import { UserRole } from "@reasn/common/src/enums/modelsEnums";
+import { UserRole } from "@reasn/common/src/enums/schemasEnums";
 import { getToken } from "@/lib/token";
 
 export const SESSION_DEFAULT = {
diff --git a/Client/reasn-client/package.json b/Client/reasn-client/package.json
index d1333d23..30f4d44b 100644
--- a/Client/reasn-client/package.json
+++ b/Client/reasn-client/package.json
@@ -27,7 +27,7 @@
     "prettier-plugin-tailwindcss": "^0.6.1",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "turbo": "latest"
+    "turbo": "^2.0.4"
   },
   "packageManager": "yarn@4.1.0",
   "engines": {
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts
index eccb599b..7e849302 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/AddressDto.test.ts
@@ -14,21 +14,21 @@ describe("AddressDto", () => {
   describe("fromJson", () => {
     it("should create an instance of AddressDto from JSON string", () => {
       const json = `{
-                "Country": "${country}",
-                "City": "${city}",
-                "Street": "${street}",
-                "State": "${state}",
-                "ZipCode": "${zipCode}"
+                "country": "${country}",
+                "city": "${city}",
+                "street": "${street}",
+                "state": "${state}",
+                "zipCode": "${zipCode}"
             }`;
 
       let address = AddressDtoMapper.fromJSON(json);
       address = address as AddressDto;
 
-      expect(address.Country).toBe(country);
-      expect(address.City).toBe(city);
-      expect(address.Street).toBe(street);
-      expect(address.State).toBe(state);
-      expect(address.ZipCode).toBe(zipCode);
+      expect(address.country).toBe(country);
+      expect(address.city).toBe(city);
+      expect(address.street).toBe(street);
+      expect(address.state).toBe(state);
+      expect(address.zipCode).toBe(zipCode);
     });
 
     it("should throw error if the JSON string is empty", () => {
@@ -37,38 +37,38 @@ describe("AddressDto", () => {
 
     it("should throw an error when providing JSON without each property individually", () => {
       const jsonWithoutCountry = `{
-                "City": "${city}",
-                "Street": "${street}",
-                "State": "${state}",
-                "ZipCode": "${zipCode}"
+                "city": "${city}",
+                "street": "${street}",
+                "state": "${state}",
+                "zipCode": "${zipCode}"
             }`;
 
       const jsonWithoutCity = `{
-                "Country": "${country}",
-                "Street": "${street}",
-                "State": "${state}",
-                "ZipCode": "${zipCode}"
+                "country": "${country}",
+                "street": "${street}",
+                "state": "${state}",
+                "zipCode": "${zipCode}"
             }`;
 
       const jsonWithoutStreet = `{
-                "Country": "${country}",
-                "City": "${city}",
-                "State": "${state}",
-                "ZipCode": "${zipCode}"
+                "country": "${country}",
+                "city": "${city}",
+                "state": "${state}",
+                "zipCode": "${zipCode}"
             }`;
 
       const jsonWithoutState = `{
-                "Country": "${country}",
-                "City": "${city}",
-                "Street": "${street}",
-                "ZipCode": "${zipCode}"
+                "country": "${country}",
+                "city": "${city}",
+                "street": "${street}",
+                "zipCode": "${zipCode}"
             }`;
 
       const jsonWithoutZipCode = `{
-                "Country": "${country}",
-                "City": "${city}",
-                "Street": "${street}",
-                "State": "${state}"
+                "country": "${country}",
+                "city": "${city}",
+                "street": "${street}",
+                "state": "${state}"
             }`;
 
       expect(() => AddressDtoMapper.fromJSON(jsonWithoutCountry)).toThrow(
@@ -92,65 +92,65 @@ describe("AddressDto", () => {
   describe("fromObject", () => {
     it("should create an instance of AddressDto from an object", () => {
       const object = {
-        Country: country,
-        City: city,
-        Street: street,
-        State: state,
-        ZipCode: zipCode,
+        country: country,
+        city: city,
+        street: street,
+        state: state,
+        zipCode: zipCode,
       };
 
       let address = AddressDtoMapper.fromObject(object);
       address = address as AddressDto;
 
-      expect(address.Country).toBe(country);
-      expect(address.City).toBe(city);
-      expect(address.Street).toBe(street);
-      expect(address.State).toBe(state);
-      expect(address.ZipCode).toBe(zipCode);
+      expect(address.country).toBe(country);
+      expect(address.city).toBe(city);
+      expect(address.street).toBe(street);
+      expect(address.state).toBe(state);
+      expect(address.zipCode).toBe(zipCode);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        Country: country,
-        City: true,
-        Street: street,
-        State: state,
-        ZipCode: null,
+        country: country,
+        city: true,
+        street: street,
+        state: state,
+        zipCode: null,
       };
 
       const objectWithoutCountry = {
-        City: city,
-        Street: street,
-        State: state,
-        ZipCode: zipCode,
+        city: city,
+        street: street,
+        state: state,
+        zipCode: zipCode,
       };
 
       const objectWithoutCity = {
-        Country: country,
-        Street: street,
-        State: state,
-        ZipCode: zipCode,
+        country: country,
+        street: street,
+        state: state,
+        zipCode: zipCode,
       };
 
       const objectWithoutStreet = {
-        Country: country,
-        City: city,
-        State: state,
-        ZipCode: zipCode,
+        country: country,
+        city: city,
+        state: state,
+        zipCode: zipCode,
       };
 
       const objectWithoutState = {
-        Country: country,
-        City: city,
-        Street: street,
-        ZipCode: zipCode,
+        country: country,
+        city: city,
+        street: street,
+        zipCode: zipCode,
       };
 
       const objectWithoutZipCode = {
-        Country: country,
-        City: city,
-        Street: street,
-        State: state,
+        country: country,
+        city: city,
+        street: street,
+        state: state,
       };
 
       expect(() => AddressDtoMapper.fromObject(object)).toThrow(
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
index 31b26838..fcefd5ad 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
@@ -13,11 +13,11 @@ describe("UserDto", () => {
   const role = UserRole.USER;
   const addressId = 2;
   const address: AddressDto = {
-    Country: "Test Country",
-    City: "Test City",
-    Street: "Test Street",
-    State: "Test State",
-    ZipCode: "12345",
+    country: "Test country",
+    city: "Test city",
+    street: "Test street",
+    state: "Test state",
+    zipCode: "12345",
   };
   const interests: UserInterestDto[] = [
     { Interest: { Name: "Programming" }, Level: 5 },
@@ -27,29 +27,29 @@ describe("UserDto", () => {
   describe("fromJson", () => {
     it("should create an instance of UserDto from JSON string", () => {
       const json = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "AddressId": ${addressId},
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+                "username": "${username}",
+                "name": "${name}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "addressId": ${addressId},
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
       let user = UserDtoMapper.fromJSON(json);
       user = user as UserDto;
 
-      expect(user.Username).toBe(username);
-      expect(user.Name).toBe(name);
-      expect(user.Surname).toBe(surname);
-      expect(user.Email).toBe(email);
-      expect(user.Phone).toBe(phone);
-      expect(user.Role).toBe(role);
-      expect(user.AddressId).toBe(addressId);
-      expect(user.Address).toEqual(address);
-      expect(user.Intrests).toEqual(interests);
+      expect(user.username).toBe(username);
+      expect(user.name).toBe(name);
+      expect(user.surname).toBe(surname);
+      expect(user.email).toBe(email);
+      expect(user.phone).toBe(phone);
+      expect(user.role).toBe(role);
+      expect(user.addressId).toBe(addressId);
+      expect(user.address).toEqual(address);
+      expect(user.intrests).toEqual(interests);
     });
 
     it("should return null if the JSON string is empty", () => {
@@ -57,128 +57,128 @@ describe("UserDto", () => {
     });
 
     it("should throw an error when providing JSON without each property individually", () => {
-      const jsonWithoutUsername = `{
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "AddressId": ${addressId},
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutusername = `{
+                "name": "${name}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "addressId": ${addressId},
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutName = `{
-                "Username": "${username}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "AddressId": ${addressId},
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutname = `{
+                "username": "${username}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "addressId": ${addressId},
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutSurname = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "AddressId": ${addressId},
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutsurname = `{
+                "username": "${username}",
+                "name": "${name}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "addressId": ${addressId},
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutEmail = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "AddressId": ${addressId},
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutemail = `{
+                "username": "${username}",
+                "name": "${name}",
+                "surname": "${surname}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "addressId": ${addressId},
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutPhone = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Role": "${role}",
-                "AddressId": ${addressId},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutphone = `{
+                "username": "${username}",
+                "name": "${name}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "role": "${role}",
+                "addressId": ${addressId},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutRole = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "AddressId": ${addressId},
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutrole = `{
+                "username": "${username}",
+                "name": "${name}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "addressId": ${addressId},
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutAddressId = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "Address": ${JSON.stringify(address)},
-                "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutaddressId = `{
+                "username": "${username}",
+                "name": "${name}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "address": ${JSON.stringify(address)},
+                "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutAddress = `{
-              "Username": "${username}",
-              "Name": "${name}",
-              "Surname": "${surname}",
-              "Email": "${email}",
-              "Phone": "${phone}",
-              "AddressId": ${addressId},
-              "Role": "${role}",
-              "Intrests": ${JSON.stringify(interests)}
+      const jsonWithoutaddress = `{
+              "username": "${username}",
+              "name": "${name}",
+              "surname": "${surname}",
+              "email": "${email}",
+              "phone": "${phone}",
+              "addressId": ${addressId},
+              "role": "${role}",
+              "intrests": ${JSON.stringify(interests)}
             }`;
 
-      const jsonWithoutInterests = `{
-                "Username": "${username}",
-                "Name": "${name}",
-                "Surname": "${surname}",
-                "Email": "${email}",
-                "Phone": "${phone}",
-                "Role": "${role}",
-                "AddressId": ${addressId}
+      const jsonWithoutinterests = `{
+                "username": "${username}",
+                "name": "${name}",
+                "surname": "${surname}",
+                "email": "${email}",
+                "phone": "${phone}",
+                "role": "${role}",
+                "addressId": ${addressId}
             }`;
 
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutUsername)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutusername)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutName)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutname)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutSurname)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutsurname)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutEmail)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutemail)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutPhone)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutphone)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutRole)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutrole)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutAddressId)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutaddressId)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutAddress)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutaddress)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromJSON(jsonWithoutInterests)).toThrow(
+      expect(() => UserDtoMapper.fromJSON(jsonWithoutinterests)).toThrow(
         ModelMappingError,
       );
     });
@@ -187,168 +187,168 @@ describe("UserDto", () => {
   describe("fromObject", () => {
     it("should create an instance of UserDto from an object", () => {
       const object = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+        username: username,
+        name: name,
+        surname: surname,
+        email: email,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
       let user = UserDtoMapper.fromObject(object);
       user = user as UserDto;
 
-      expect(user.Username).toBe(username);
-      expect(user.Name).toBe(name);
-      expect(user.Surname).toBe(surname);
-      expect(user.Email).toBe(email);
-      expect(user.Phone).toBe(phone);
-      expect(user.Role).toBe(role);
-      expect(user.AddressId).toBe(addressId);
-      expect(user.Address).toEqual(address);
-      expect(user.Intrests).toEqual(interests);
+      expect(user.username).toBe(username);
+      expect(user.name).toBe(name);
+      expect(user.surname).toBe(surname);
+      expect(user.email).toBe(email);
+      expect(user.phone).toBe(phone);
+      expect(user.role).toBe(role);
+      expect(user.addressId).toBe(addressId);
+      expect(user.address).toEqual(address);
+      expect(user.intrests).toEqual(interests);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        Username: true,
-        Name: null,
-        Surname: "Doe",
-        Email: "john.doe@example.com",
-        Phone: "+1234567890",
-        Role: UserRole.USER,
-        AddressId: 2,
-        Intrests: interests,
+        username: true,
+        name: null,
+        surname: "Doe",
+        email: "john.doe@example.com",
+        phone: "+1234567890",
+        role: UserRole.USER,
+        addressId: 2,
+        intrests: interests,
       };
 
-      const objectWithoutUsername = {
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutusername = {
+        name: name,
+        surname: surname,
+        email: email,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutName = {
-        Username: username,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutname = {
+        username: username,
+        surname: surname,
+        email: email,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutSurname = {
-        Username: username,
-        Name: name,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutsurname = {
+        username: username,
+        name: name,
+        email: email,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutEmail = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutemail = {
+        username: username,
+        name: name,
+        surname: surname,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutPhone = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutphone = {
+        username: username,
+        name: name,
+        surname: surname,
+        email: email,
+        role: role,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutRole = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        AddressId: addressId,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutrole = {
+        username: username,
+        name: name,
+        surname: surname,
+        email: email,
+        phone: phone,
+        addressId: addressId,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutAddressId = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        Address: address,
-        Intrests: interests,
+      const objectWithoutaddressId = {
+        username: username,
+        name: name,
+        surname: surname,
+        email: email,
+        phone: phone,
+        role: role,
+        address: address,
+        intrests: interests,
       };
 
-      const objectWithoutAddress = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Intrests: interests,
+      const objectWithoutaddress = {
+        username: username,
+        name: name,
+        surname: surname,
+        email: email,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        intrests: interests,
       };
 
-      const objectWithoutInterests = {
-        Username: username,
-        Name: name,
-        Surname: surname,
-        Email: email,
-        Phone: phone,
-        Role: role,
-        AddressId: addressId,
-        Address: address,
+      const objectWithoutinterests = {
+        username: username,
+        name: name,
+        surname: surname,
+        email: email,
+        phone: phone,
+        role: role,
+        addressId: addressId,
+        address: address,
       };
 
       expect(() => UserDtoMapper.fromObject(object)).toThrow(ModelMappingError);
-      expect(() => UserDtoMapper.fromObject(objectWithoutUsername)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutusername)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutName)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutname)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutSurname)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutsurname)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutEmail)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutemail)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutPhone)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutphone)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutRole)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutrole)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutAddressId)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutaddressId)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutAddress)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutaddress)).toThrow(
         ModelMappingError,
       );
-      expect(() => UserDtoMapper.fromObject(objectWithoutInterests)).toThrow(
+      expect(() => UserDtoMapper.fromObject(objectWithoutinterests)).toThrow(
         ModelMappingError,
       );
     });
diff --git a/Client/reasn-client/packages/common/src/helpers/errorHelpers.ts b/Client/reasn-client/packages/common/src/helpers/errorHelpers.ts
new file mode 100644
index 00000000..e80842c7
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/helpers/errorHelpers.ts
@@ -0,0 +1,45 @@
+import ApiAuthorizationError from "@reasn/common/src/errors/ApiAuthorizationError";
+import ApiConnectionError from "@reasn/common/src/errors/ApiConnectionError";
+import { ZodError, ZodIssue } from "zod";
+
+export const handleErrorMessage = (e: any) => {
+  if (e instanceof ApiAuthorizationError) {
+    return {
+      message: "Niepoprawne dane logowania." + e.message,
+    };
+  }
+  if (e instanceof ApiConnectionError) {
+    return {
+      message: "Wystąpił błąd podczas logowania: " + e.message,
+    };
+  }
+
+  if (e instanceof Error) {
+    return {
+      message: "Wystąpił błąd podczas logowania: " + e.message,
+    };
+  }
+
+  return {
+    message: "Wystąpił błąd podczas logowania: ",
+  };
+};
+
+const formatZodIssue = (issue: ZodIssue): string => {
+  const { path, message } = issue;
+  const pathString = path.join(".");
+
+  return `${pathString}: ${message}`;
+};
+
+export const formatZodError = (error: ZodError): string => {
+  const { issues } = error;
+
+  if (issues.length) {
+    const currentIssue = issues[0];
+
+    return formatZodIssue(currentIssue);
+  }
+
+  return "Niepoprawne wartości formularza.";
+};
diff --git a/Client/reasn-client/packages/common/src/schemas/AddressDto.ts b/Client/reasn-client/packages/common/src/schemas/AddressDto.ts
index 8ad11d68..a6d4504f 100644
--- a/Client/reasn-client/packages/common/src/schemas/AddressDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/AddressDto.ts
@@ -2,23 +2,23 @@ import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const AddressDtoSchema = z.object({
-  Country: z
+  country: z
     .string()
     .max(64)
     .regex(/^\p{Lu}[\p{L}\s'-]*(?<![\s-])$/u),
-  City: z
+  city: z
     .string()
     .max(64)
     .regex(/^\p{Lu}[\p{Ll}'.]+(?:[\s-][\p{L}'.]+)*$/u),
-  Street: z
+  street: z
     .string()
     .max(64)
     .regex(/^[\p{L}\d\s\-/.,#']+(?<![-\s#,])$/u),
-  State: z
+  state: z
     .string()
     .max(64)
     .regex(/^\p{Lu}\p{Ll}+(?:(\s|-)\p{L}+)*$/u),
-  ZipCode: z
+  zipCode: z
     .string()
     .regex(/^[\p{L}\d\s-]{3,}$/u)
     .nullable(),
diff --git a/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts b/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts
index bb0ab075..ad4a0fa9 100644
--- a/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts
+++ b/Client/reasn-client/packages/common/src/schemas/RegisterRequest.ts
@@ -24,7 +24,7 @@ export const RegisterRequestSchema = z.object({
     .regex(/^\+\d{1,3}\s\d{1,15}$/)
     .nullable(),
   address: AddressDtoSchema,
-  Role: z.enum(["User", "Organizer"]),
+  role: z.enum(["User", "Organizer"]),
 });
 
 export type RegisterRequest = z.infer<typeof RegisterRequestSchema>;
diff --git a/Client/reasn-client/packages/common/src/schemas/UserDto.ts b/Client/reasn-client/packages/common/src/schemas/UserDto.ts
index 7053027c..37ea88b9 100644
--- a/Client/reasn-client/packages/common/src/schemas/UserDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/UserDto.ts
@@ -5,27 +5,27 @@ import { UserRole } from "../enums/schemasEnums";
 import { z } from "zod";
 
 export const UserDtoSchema = z.object({
-  Username: z
+  username: z
     .string()
     .max(64)
     .regex(/^[\p{L}\d._%+-]{4,}$/u),
-  Name: z
+  name: z
     .string()
     .max(64)
     .regex(/^\p{Lu}[\p{Ll}\s'-]+$/u),
-  Surname: z
+  surname: z
     .string()
     .max(64)
     .regex(/^\p{L}+(?:[\s'-]\p{L}+)*$/u),
-  Email: z.string().email(),
-  Phone: z
+  email: z.string().email(),
+  phone: z
     .string()
     .nullable()
     .refine((value) => value === null || /^\+\d{1,3}\s\d{1,15}$/.test(value)),
-  Role: z.nativeEnum(UserRole),
-  AddressId: z.number(),
-  Address: AddressDtoSchema,
-  Intrests: z.array(UserInterestDtoSchema),
+  role: z.nativeEnum(UserRole),
+  addressId: z.number(),
+  address: AddressDtoSchema,
+  intrests: z.array(UserInterestDtoSchema),
 });
 
 export type UserDto = z.infer<typeof UserDtoSchema>;
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Toast.tsx b/Client/reasn-client/packages/ui/src/components/shared/Toast.tsx
new file mode 100644
index 00000000..ea020019
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/Toast.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+interface ToastProps {
+  message?: string | null;
+  errors?: string;
+}
+
+export const Toast = (props: ToastProps) => {
+  const { message, errors } = props;
+  console.log(errors);
+  return (
+    <div className="min-h-10 max-w-[25rem] rounded-lg border-2 border-[#FF6363] bg-black px-6 py-3">
+      {message && <div className="text-base font-semibold">{message}</div>}
+      {errors && <div className="text-sm text-red-500">{errors}</div>}
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
index 31ca0eb6..29882937 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
@@ -5,16 +5,18 @@ import React from "react";
 
 interface ButtonProps {
   text: string;
+  type?: "button" | "submit" | "reset";
   className?: string;
   background?: string;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 export const ButtonBase = (props: ButtonProps) => {
-  const { text, className, background, onClick } = props;
+  const { text, type, className, background, onClick } = props;
   return (
     <button
-      onClick={onClick}
+      onClick={() => onClick?.()}
+      type={type ?? "button"}
       className={clsx(
         className,
         "w-36 rounded-2xl px-4 py-2",
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
index de81088c..6c00391a 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import React, { useState } from "react";
+import React, { useState, ChangeEvent } from "react";
 
 interface InputProps {
   type: string;
@@ -9,7 +9,7 @@ interface InputProps {
   name?: string;
   defaultValue?: string;
   className?: string;
-  onChange?: (value: string) => void;
+  onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
   onFocus?: () => void;
   onBlur?: () => void;
 }
@@ -41,10 +41,16 @@ export const FloatingInput = (props: InputProps) => {
   return (
     <div
       className={clsx(
-        "relative rounded-xl bg-[#232327] p-1",
+        "relative rounded-xl bg-[#232327]",
         {
           "bg-gradient-to-r from-[#32346A] to-[#4E4F75]": isFocused,
         },
+        {
+          "p-1": type !== "hidden",
+        },
+        {
+          "hidden h-0 p-0": type === "hidden",
+        },
         className,
       )}
     >
@@ -59,6 +65,9 @@ export const FloatingInput = (props: InputProps) => {
             "top-[20%] text-base":
               !isFocused && !isFilled && !["date", "time"].includes(type),
           },
+          {
+            hidden: type === "hidden",
+          },
         )}
       >
         {label ?? ""}
@@ -67,12 +76,20 @@ export const FloatingInput = (props: InputProps) => {
         type={type}
         name={name}
         id={name}
-        className="h-full w-full rounded-lg bg-[#232327] p-2 focus:outline-none"
+        className={clsx(
+          "w-full rounded-lg bg-[#232327] focus:outline-none",
+          {
+            "h-0 p-0": type === "hidden",
+          },
+          {
+            "h-full p-2": type !== "hidden",
+          },
+        )}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={(e) => {
           setIsFilled(!!e.target.value);
-          onChange?.(e.target.value);
+          onChange?.(e);
         }}
         defaultValue={defaultValue}
       />
@@ -102,7 +119,7 @@ export const BaseInput = (props: InputProps) => {
         onFocus={() => onFocus?.()}
         onBlur={() => onBlur?.()}
         onChange={(e) => {
-          onChange?.(e.target.value);
+          onChange?.(e);
         }}
         defaultValue={defaultValue}
         placeholder={label}
diff --git a/Client/reasn-client/packages/ui/src/components/shared/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
index 3bb07c3c..ab5033f7 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/index.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
@@ -3,3 +3,4 @@ export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
 export { Interest } from "./Interest";
 export { Comment } from "./Comment";
+export { Toast } from "./Toast";
diff --git a/Client/reasn-client/yarn.lock b/Client/reasn-client/yarn.lock
index 1326e348..89634a10 100644
--- a/Client/reasn-client/yarn.lock
+++ b/Client/reasn-client/yarn.lock
@@ -14798,7 +14798,7 @@ __metadata:
     tailwindcss: "npm:^3.4.3"
     ts-jest: "npm:^29.1.2"
     ts-node: "npm:^10.9.2"
-    turbo: "npm:latest"
+    turbo: "npm:^2.0.4"
     zod: "npm:^3.23.7"
   languageName: unknown
   linkType: soft
@@ -16923,58 +16923,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"turbo-darwin-64@npm:1.13.2":
-  version: 1.13.2
-  resolution: "turbo-darwin-64@npm:1.13.2"
+"turbo-darwin-64@npm:2.0.4":
+  version: 2.0.4
+  resolution: "turbo-darwin-64@npm:2.0.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-darwin-arm64@npm:1.13.2":
-  version: 1.13.2
-  resolution: "turbo-darwin-arm64@npm:1.13.2"
+"turbo-darwin-arm64@npm:2.0.4":
+  version: 2.0.4
+  resolution: "turbo-darwin-arm64@npm:2.0.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-linux-64@npm:1.13.2":
-  version: 1.13.2
-  resolution: "turbo-linux-64@npm:1.13.2"
+"turbo-linux-64@npm:2.0.4":
+  version: 2.0.4
+  resolution: "turbo-linux-64@npm:2.0.4"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-linux-arm64@npm:1.13.2":
-  version: 1.13.2
-  resolution: "turbo-linux-arm64@npm:1.13.2"
+"turbo-linux-arm64@npm:2.0.4":
+  version: 2.0.4
+  resolution: "turbo-linux-arm64@npm:2.0.4"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-windows-64@npm:1.13.2":
-  version: 1.13.2
-  resolution: "turbo-windows-64@npm:1.13.2"
+"turbo-windows-64@npm:2.0.4":
+  version: 2.0.4
+  resolution: "turbo-windows-64@npm:2.0.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-windows-arm64@npm:1.13.2":
-  version: 1.13.2
-  resolution: "turbo-windows-arm64@npm:1.13.2"
+"turbo-windows-arm64@npm:2.0.4":
+  version: 2.0.4
+  resolution: "turbo-windows-arm64@npm:2.0.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo@npm:latest":
-  version: 1.13.2
-  resolution: "turbo@npm:1.13.2"
-  dependencies:
-    turbo-darwin-64: "npm:1.13.2"
-    turbo-darwin-arm64: "npm:1.13.2"
-    turbo-linux-64: "npm:1.13.2"
-    turbo-linux-arm64: "npm:1.13.2"
-    turbo-windows-64: "npm:1.13.2"
-    turbo-windows-arm64: "npm:1.13.2"
+"turbo@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "turbo@npm:2.0.4"
+  dependencies:
+    turbo-darwin-64: "npm:2.0.4"
+    turbo-darwin-arm64: "npm:2.0.4"
+    turbo-linux-64: "npm:2.0.4"
+    turbo-linux-arm64: "npm:2.0.4"
+    turbo-windows-64: "npm:2.0.4"
+    turbo-windows-arm64: "npm:2.0.4"
   dependenciesMeta:
     turbo-darwin-64:
       optional: true
@@ -16990,7 +16990,7 @@ __metadata:
       optional: true
   bin:
     turbo: bin/turbo
-  checksum: 10c0/f02c06dfdb0339b91bea7d1c9f9f35f0a271df636e49f5f50ad444f6ae22d2205214a71ca31b197a665dc0bf995dc100e47d204c6e674550266efa910505eb7e
+  checksum: 10c0/5d4fbc5497fbc454e127ef3b8bd31bd556663e2db9fdc0e97f1282c4162e90d499a45809340fe9a5195f246c5c0d3aec57ea64b9d892f46f3f5a18a09619c7d9
   languageName: node
   linkType: hard
 

From 40dd22bd2f136f2c0cb5dfd1fbd0f71d9bcb68af Mon Sep 17 00:00:00 2001
From: Dawid Machoczek <Raczuekk@gmail.com>
Date: Sun, 23 Jun 2024 14:51:58 +0200
Subject: [PATCH 07/13] [RSN-74] - Add middleware for handling protected routes
 (#68)

---
 Client/reasn-client/apps/web/middleware.ts | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 Client/reasn-client/apps/web/middleware.ts

diff --git a/Client/reasn-client/apps/web/middleware.ts b/Client/reasn-client/apps/web/middleware.ts
new file mode 100644
index 00000000..55effad4
--- /dev/null
+++ b/Client/reasn-client/apps/web/middleware.ts
@@ -0,0 +1,36 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { getSession } from "@/lib/session";
+import { UserRole } from "@reasn/common/src/enums/schemasEnums";
+
+export const middleware = (req: NextRequest) => {
+  const session = getSession();
+  const path = req.nextUrl.pathname;
+
+  const isAuthPath = path.startsWith("/login") || path.startsWith("/register");
+
+  if (!session.isAuthenticated()) {
+    if (isAuthPath) return NextResponse.next();
+    return NextResponse.redirect(new URL("/login", req.url));
+  }
+
+  if (isAuthPath) {
+    return NextResponse.redirect(new URL("/me", req.url));
+  }
+
+  if (path.startsWith("/events") && session.user?.role === UserRole.USER) {
+    return NextResponse.redirect(new URL("/events", req.url));
+  }
+};
+
+export const config = {
+  matcher: [
+    "/events/new",
+    "/events/(.*)/(.*)",
+    "/me",
+    "/me/(.*)",
+    "/login",
+    "/register",
+    "/register/(.*)",
+  ],
+};

From ab4ab0fc9174418b1fd8ee8aae9d89dfa2e98334 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 15:35:59 +0200
Subject: [PATCH 08/13] [RSN-84] - Implemented UI for adding a comment (#70)

---
 .../apps/web/app/events/[slug]/page.tsx        |  3 ++-
 .../ui/src/components/shared/Comment.tsx       | 18 ++++++++++++++++--
 .../ui/src/components/shared/form/Dropdown.tsx |  4 +++-
 .../ui/src/components/shared/index.tsx         |  2 +-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
index deb47f14..69d6f5a3 100644
--- a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
+++ b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
@@ -2,7 +2,7 @@
 
 import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card";
 import { ButtonBase } from "@reasn/ui/src/components/shared/form";
-import { Comment } from "@reasn/ui/src/components/shared/Comment";
+import { Comment, NewComment } from "@reasn/ui/src/components/shared/Comment";
 import { useEffect, useRef, useState } from "react";
 import {
   ArrowLeft,
@@ -271,6 +271,7 @@ const EventPage = ({ params }: { params: { slug: string } }) => {
           <div className="relative">
             <h3 className="font-semibold">Komentarze:</h3>
             <div className="flex flex-col gap-2">
+              <NewComment />
               <Comment />
               <Comment />
               <Comment />
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
index c2bceb92..a979009e 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
@@ -3,12 +3,13 @@ import {
   CommentDto,
   CommentDtoMapper,
 } from "@reasn/common/src/schemas/CommentDto";
+import { ButtonBase, FloatingTextarea } from "./form";
 
 interface CommentProps {
-  comment: CommentDto;
+  comment?: CommentDto;
 }
 
-export const Comment = () => {
+export const Comment = (props: CommentProps) => {
   const comment = CommentDtoMapper.fromObject({
     EventId: 1,
     Content:
@@ -36,3 +37,16 @@ export const Comment = () => {
     </div>
   );
 };
+
+export const NewComment = () => {
+  return (
+    <div className="mb-8 flex flex-col gap-4 rounded-md bg-[#4b4e526d] p-2">
+      <FloatingTextarea
+        label="Treść komentarza"
+        name="newComment"
+        className="mt-8 h-32"
+      />
+      <ButtonBase className="ml-auto" text="Dodaj" />
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
index 834786de..6a2ddb7c 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import { FloatingInput } from "./Input";
 import clsx from "clsx";
@@ -47,7 +49,7 @@ export const SearchMultiDropdown = (props: MultiDropdownProps) => {
         label={label}
         className="w-full rounded-b-none"
         defaultValue={search}
-        onChange={setSearch}
+        onChange={(e) => setSearch(e.target.value)}
       />
       <div className="flex h-16 flex-wrap justify-start gap-2 overflow-auto rounded-b-lg bg-[#232327] p-2 text-xs">
         {selectedOptions.concat(filteredOptions).map((option) => (
diff --git a/Client/reasn-client/packages/ui/src/components/shared/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
index ab5033f7..29d6008b 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/index.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
@@ -2,5 +2,5 @@ export { Card, CardVariant } from "./Card";
 export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
 export { Interest } from "./Interest";
-export { Comment } from "./Comment";
+export { Comment, NewComment } from "./Comment";
 export { Toast } from "./Toast";

From 2b7ad42887d01c1e37dcef3e1558d5547e199480 Mon Sep 17 00:00:00 2001
From: Dawid Machoczek <Raczuekk@gmail.com>
Date: Sun, 23 Jun 2024 16:58:52 +0200
Subject: [PATCH 09/13] [RSN-85] Fix redirecting after successfully form
 submition (#72)

---
 Client/reasn-client/apps/web/app/login/action.ts    | 3 ++-
 Client/reasn-client/apps/web/app/register/action.ts | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Client/reasn-client/apps/web/app/login/action.ts b/Client/reasn-client/apps/web/app/login/action.ts
index 8a901da2..38194b2b 100644
--- a/Client/reasn-client/apps/web/app/login/action.ts
+++ b/Client/reasn-client/apps/web/app/login/action.ts
@@ -33,8 +33,9 @@ export const loginAction = async (
   try {
     const payload = await login(result.data);
     setToken(payload);
-    redirect("/");
   } catch (e) {
     return handleErrorMessage(e);
   }
+
+  redirect("/");
 };
diff --git a/Client/reasn-client/apps/web/app/register/action.ts b/Client/reasn-client/apps/web/app/register/action.ts
index c7b6bb7c..55941937 100644
--- a/Client/reasn-client/apps/web/app/register/action.ts
+++ b/Client/reasn-client/apps/web/app/register/action.ts
@@ -55,8 +55,9 @@ export const registerAction = async (
 
   try {
     await register(RegisterRequestMapper.fromObject(result.data));
-    redirect("/login");
   } catch (e) {
     return handleErrorMessage(e);
   }
+
+  redirect("/login");
 };

From e51b93c32af303cb828cda674b78f3bac430268b Mon Sep 17 00:00:00 2001
From: Dawid Machoczek <Raczuekk@gmail.com>
Date: Sun, 23 Jun 2024 17:32:28 +0200
Subject: [PATCH 10/13] [RSN-86] Make frontend schemas compliant with backend
 requests/responses (#75)

* refactor: make schemas compliant with backend models

* refactor: add appropriate return types in services
---
 .../reasn-client/apps/web/services/event.ts   |   7 +-
 Client/reasn-client/apps/web/services/user.ts |   7 +-
 .../__tests__/schemas/CommentDto.test.ts      | 193 +++++---
 .../common/__tests__/schemas/EventDto.test.ts | 463 ------------------
 .../common/__tests__/schemas/ImageDto.test.ts | 110 -----
 .../__tests__/schemas/InterestDto.test.ts     |   8 +-
 .../__tests__/schemas/ParameterDto.test.ts    |  28 +-
 .../__tests__/schemas/ParticipantDto.test.ts  |  54 +-
 .../common/__tests__/schemas/TagDto.test.ts   |  10 +-
 .../common/__tests__/schemas/UserDto.test.ts  |   4 +-
 .../__tests__/schemas/UserInterestDto.test.ts |  30 +-
 .../packages/common/src/schemas/CommentDto.ts |  15 +-
 .../common/src/schemas/CommentRequest.ts      |   7 +
 .../packages/common/src/schemas/EventDto.ts   |  73 ---
 .../common/src/schemas/EventResponse.ts       |  15 +-
 .../packages/common/src/schemas/ImageDto.ts   |  39 --
 .../common/src/schemas/InterestDto.ts         |   2 +-
 .../common/src/schemas/ParameterDto.ts        |   4 +-
 .../common/src/schemas/ParticipantDto.ts      |   6 +-
 .../packages/common/src/schemas/TagDto.ts     |   2 +-
 .../common/src/schemas/UserInterestDto.ts     |   4 +-
 21 files changed, 229 insertions(+), 852 deletions(-)
 delete mode 100644 Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts
 delete mode 100644 Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts
 create mode 100644 Client/reasn-client/packages/common/src/schemas/CommentRequest.ts
 delete mode 100644 Client/reasn-client/packages/common/src/schemas/EventDto.ts
 delete mode 100644 Client/reasn-client/packages/common/src/schemas/ImageDto.ts

diff --git a/Client/reasn-client/apps/web/services/event.ts b/Client/reasn-client/apps/web/services/event.ts
index ea052b4b..29ebccc7 100644
--- a/Client/reasn-client/apps/web/services/event.ts
+++ b/Client/reasn-client/apps/web/services/event.ts
@@ -6,6 +6,7 @@ import {
 } from "@reasn/common/src/schemas/EventResponse";
 import { ParameterDto } from "@reasn/common/src/schemas/ParameterDto";
 import { TagDto } from "@reasn/common/src/schemas/TagDto";
+import { CommentDto } from "@reasn/common/src/schemas/CommentDto";
 
 const baseUrl = `${process.env.REASN_API_URL}/api/v1/events`;
 
@@ -129,10 +130,12 @@ export const getEventParticipants = async (slug: string): Promise<any> => {
   return response;
 };
 
-export const getEventComments = async (slug: string): Promise<any> => {
+export const getEventComments = async (slug: string): Promise<CommentDto[]> => {
   const url = new URL(`${baseUrl}/${slug}/comments`);
 
-  const response = await sendRequest<any>(url, { method: HttpMethod.GET });
+  const response = await sendRequest<CommentDto[]>(url, {
+    method: HttpMethod.GET,
+  });
   return response;
 };
 
diff --git a/Client/reasn-client/apps/web/services/user.ts b/Client/reasn-client/apps/web/services/user.ts
index 80badc15..a16d736e 100644
--- a/Client/reasn-client/apps/web/services/user.ts
+++ b/Client/reasn-client/apps/web/services/user.ts
@@ -4,6 +4,7 @@ import {
   ParticipantDto,
   ParticipantDtoMapper,
 } from "@reasn/common/src/schemas/ParticipantDto";
+import { InterestDto } from "@reasn/common/src/schemas/InterestDto";
 
 const baseUrl = `${process.env.REASN_API_URL}/api/v1`;
 const baseUsersUrl = `${baseUrl}/users`;
@@ -45,11 +46,13 @@ export const updateUser = async (
 
 export const getUsersInterests = async (
   params: Record<string, string> = {},
-): Promise<any> => {
+): Promise<InterestDto[]> => {
   const url = new URL(`${baseUsersUrl}/interests`);
   url.search = new URLSearchParams(params).toString();
 
-  const response = await sendRequest<any>(url, { method: HttpMethod.GET });
+  const response = await sendRequest<InterestDto[]>(url, {
+    method: HttpMethod.GET,
+  });
   return response;
 };
 
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts
index 20645b92..9aba26a1 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/CommentDto.test.ts
@@ -5,27 +5,30 @@ import {
 } from "@reasn/common/src/schemas/CommentDto";
 
 describe("CommentDto", () => {
-  const eventId = 1;
+  const eventSlug = "event-slug";
   const content = "Test Content";
   const createdAt = new Date();
-  const userId = 2;
+  const username = "username";
+  const userImageUrl = "url";
 
   describe("fromJson", () => {
     it("should create an instance of CommentDto from JSON string", () => {
       const json = `{
-                "EventId": ${eventId},
-                "Content": "${content}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UserId": ${userId}
+                "eventSlug": "${eventSlug}",
+                "content": "${content}",
+                "createdAt": "${createdAt.toISOString()}",
+                "username": "${username}",
+                "userImageUrl": "${userImageUrl}"
             }`;
 
       let comment = CommentDtoMapper.fromJSON(json);
       comment = comment as CommentDto;
 
-      expect(comment.EventId).toBe(eventId);
-      expect(comment.Content).toBe(content);
-      expect(comment.CreatedAt).toEqual(createdAt);
-      expect(comment.UserId).toBe(userId);
+      expect(comment.eventSlug).toBe(eventSlug);
+      expect(comment.content).toBe(content);
+      expect(comment.createdAt).toEqual(createdAt);
+      expect(comment.username).toBe(username);
+      expect(comment.userImageUrl).toBe(userImageUrl);
     });
 
     it("should throw an error if the JSON string is empty", () => {
@@ -33,31 +36,42 @@ describe("CommentDto", () => {
     });
 
     it("should throw an error when providing JSON without each property individually", () => {
-      const jsonWithoutEventId = `{
-                "Content": "${content}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UserId": ${userId}
+      const jsonWithoutEventSlug = `{
+                "content": "${content}",
+                "createdAt": "${createdAt.toISOString()}",
+                "username": "${username}",
+                "userImageUrl": "${userImageUrl}"
             }`;
 
       const jsonWithoutContent = `{
-                "EventId": ${eventId},
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UserId": ${userId}
+                "eventSlug": "${eventSlug}",
+                "createdAt": "${createdAt.toISOString()}",
+                "username": "${username}",
+                "userImageUrl": "${userImageUrl}"
             }`;
 
       const jsonWithoutCreatedAt = `{
-                "EventId": ${eventId},
-                "Content": "${content}",
-                "UserId": ${userId}
+                "eventSlug": "${eventSlug}",
+                "content": "${content}",
+                "username": "${username}",
+                "userImageUrl": "${userImageUrl}"
             }`;
 
-      const jsonWithoutUserId = `{
-                "EventId": ${eventId},
-                "Content": "${content}",
-                "CreatedAt": "${createdAt.toISOString()}"
+      const jsonWithoutUsername = `{
+                "eventSlug": "${eventSlug}",
+                "content": "${content}",
+                "createdAt": "${createdAt.toISOString()}",
+                "userImageUrl": "${userImageUrl}"
             }`;
 
-      expect(() => CommentDtoMapper.fromJSON(jsonWithoutEventId)).toThrow(
+      const jsonWithoutUserImageUrl = `{
+                "eventSlug": "${eventSlug}",
+                "content": "${content}",
+                "createdAt": "${createdAt.toISOString()}",
+                "username": "${username}"
+            }`;
+
+      expect(() => CommentDtoMapper.fromJSON(jsonWithoutEventSlug)).toThrow(
         ModelMappingError,
       );
       expect(() => CommentDtoMapper.fromJSON(jsonWithoutContent)).toThrow(
@@ -66,7 +80,10 @@ describe("CommentDto", () => {
       expect(() => CommentDtoMapper.fromJSON(jsonWithoutCreatedAt)).toThrow(
         ModelMappingError,
       );
-      expect(() => CommentDtoMapper.fromJSON(jsonWithoutUserId)).toThrow(
+      expect(() => CommentDtoMapper.fromJSON(jsonWithoutUsername)).toThrow(
+        ModelMappingError,
+      );
+      expect(() => CommentDtoMapper.fromJSON(jsonWithoutUserImageUrl)).toThrow(
         ModelMappingError,
       );
     });
@@ -75,57 +92,71 @@ describe("CommentDto", () => {
   describe("fromObject", () => {
     it("should create an instance of CommentDto from an object", () => {
       const object = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: createdAt,
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: createdAt,
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       let comment = CommentDtoMapper.fromObject(object);
       comment = comment as CommentDto;
 
-      expect(comment.EventId).toBe(eventId);
-      expect(comment.Content).toBe(content);
-      expect(comment.CreatedAt).toEqual(createdAt);
-      expect(comment.UserId).toBe(userId);
+      expect(comment.eventSlug).toBe(eventSlug);
+      expect(comment.content).toBe(content);
+      expect(comment.createdAt).toEqual(createdAt);
+      expect(comment.username).toBe(username);
+      expect(comment.userImageUrl).toBe(userImageUrl);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        EventId: eventId,
-        Content: true,
-        CreatedAt: createdAt,
-        UserId: null,
+        eventSlug: eventSlug,
+        content: true,
+        createdAt: createdAt,
+        username: null,
+        userImageUrl: userImageUrl,
       };
 
-      const objectWithoutEventId = {
-        Content: content,
-        CreatedAt: createdAt,
-        UserId: userId,
+      const objectWithoutEventSlug = {
+        content: content,
+        createdAt: createdAt,
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       const objectWithoutContent = {
-        EventId: eventId,
-        CreatedAt: createdAt,
-        UserId: userId,
+        eventSlug: eventSlug,
+        createdAt: createdAt,
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       const objectWithoutCreatedAt = {
-        EventId: eventId,
-        Content: content,
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        username: username,
+        userImageUrl: userImageUrl,
+      };
+
+      const objectWithoutUsername = {
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: createdAt,
+        userImageUrl: userImageUrl,
       };
 
-      const objectWithoutUserId = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: createdAt,
+      const objectWithoutUserImageUrl = {
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: createdAt,
+        username: username,
       };
 
       expect(() => CommentDtoMapper.fromObject(object)).toThrow(
         ModelMappingError,
       );
-      expect(() => CommentDtoMapper.fromObject(objectWithoutEventId)).toThrow(
+      expect(() => CommentDtoMapper.fromObject(objectWithoutEventSlug)).toThrow(
         ModelMappingError,
       );
       expect(() => CommentDtoMapper.fromObject(objectWithoutContent)).toThrow(
@@ -134,24 +165,29 @@ describe("CommentDto", () => {
       expect(() => CommentDtoMapper.fromObject(objectWithoutCreatedAt)).toThrow(
         ModelMappingError,
       );
-      expect(() => CommentDtoMapper.fromObject(objectWithoutUserId)).toThrow(
+      expect(() => CommentDtoMapper.fromObject(objectWithoutUsername)).toThrow(
         ModelMappingError,
       );
+      expect(() =>
+        CommentDtoMapper.fromObject(objectWithoutUserImageUrl),
+      ).toThrow(ModelMappingError);
     });
 
     it("should throw an error if date is in incorrect format", () => {
       const object = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: "invalid date",
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: "invalid date",
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       const objectMissingZ = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: "2009-06-15T13:45:30.0000000",
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: "2009-06-15T13:45:30.0000000",
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       expect(() => CommentDtoMapper.fromObject(object)).toThrow(
@@ -164,44 +200,47 @@ describe("CommentDto", () => {
 
     it("should properly parse date string", () => {
       const object = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: "2009-06-15T13:45:30.0000000-07:00",
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: "2009-06-15T13:45:30.0000000-07:00",
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       const objectWithoutOffset = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: "2009-06-15T13:45:30.0000000Z",
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: "2009-06-15T13:45:30.0000000Z",
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       const objectWithoutMilliseconds = {
-        EventId: eventId,
-        Content: content,
-        CreatedAt: "2009-06-15T13:45:30Z",
-        UserId: userId,
+        eventSlug: eventSlug,
+        content: content,
+        createdAt: "2009-06-15T13:45:30Z",
+        username: username,
+        userImageUrl: userImageUrl,
       };
 
       let comment = CommentDtoMapper.fromObject(object);
       comment = comment as CommentDto;
 
-      expect(comment.CreatedAt).toEqual(
+      expect(comment.createdAt).toEqual(
         new Date("2009-06-15T13:45:30.0000000-07:00"),
       );
 
       comment = CommentDtoMapper.fromObject(objectWithoutOffset);
       comment = comment as CommentDto;
 
-      expect(comment.CreatedAt).toEqual(
+      expect(comment.createdAt).toEqual(
         new Date("2009-06-15T13:45:30.0000000Z"),
       );
 
       comment = CommentDtoMapper.fromObject(objectWithoutMilliseconds);
       comment = comment as CommentDto;
 
-      expect(comment.CreatedAt).toEqual(new Date("2009-06-15T13:45:30Z"));
+      expect(comment.createdAt).toEqual(new Date("2009-06-15T13:45:30Z"));
     });
   });
 });
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts
deleted file mode 100644
index 73a7a9dd..00000000
--- a/Client/reasn-client/packages/common/__tests__/schemas/EventDto.test.ts
+++ /dev/null
@@ -1,463 +0,0 @@
-import { EventDto, EventDtoMapper } from "@reasn/common/src/schemas/EventDto";
-import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
-import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
-import { TagDto } from "@reasn/common/src/schemas/TagDto";
-
-describe("EventDto", () => {
-  const name = "Test Event";
-  const addressId = 1;
-  const description = "This is a test event";
-  const organizerId = 1;
-  const startAt = new Date("2022-01-01");
-  const endAt = new Date("2022-01-02");
-  const createdAt = new Date("2022-01-01");
-  const updatedAt = new Date("2022-01-01");
-  const slug = "test-event";
-  const status = EventStatus.APPROVED;
-  const tags: TagDto[] = [{ Name: "first tag" }, { Name: "second tag" }];
-
-  describe("fromJson", () => {
-    it("should create an instance of EventDto from JSON string", () => {
-      const json = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      let event = EventDtoMapper.fromJSON(json);
-      event = event as EventDto;
-
-      expect(event.Name).toBe(name);
-      expect(event.AddressId).toBe(addressId);
-      expect(event.Description).toBe(description);
-      expect(event.OrganizerId).toBe(organizerId);
-      expect(event.StartAt).toEqual(startAt);
-      expect(event.EndAt).toEqual(endAt);
-      expect(event.CreatedAt).toEqual(createdAt);
-      expect(event.UpdatedAt).toEqual(updatedAt);
-      expect(event.Slug).toBe(slug);
-      expect(event.Status).toBe(status);
-      expect(event.Tags).toEqual(tags);
-    });
-
-    it("should return null if the JSON string is empty", () => {
-      expect(() => EventDtoMapper.fromJSON("")).toThrow(ModelMappingError);
-    });
-
-    it("should throw an error when providing json without each property individually", () => {
-      const jsonWithoutName = `{
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutAddressId = `{
-                "Name": "${name}",
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutDescription = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutOrganizerId = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutStartAt = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutEndAt = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutCreatedAt = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutUpdatedAt = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutSlug = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Status": "${status}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutStatus = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Tags": ${JSON.stringify(tags)}
-            }`;
-
-      const jsonWithoutTags = `{
-                "Name": "${name}",
-                "AddressId": ${addressId},
-                "Description": "${description}",
-                "OrganizerId": ${organizerId},
-                "StartAt": "${startAt.toISOString()}",
-                "EndAt": "${endAt.toISOString()}",
-                "CreatedAt": "${createdAt.toISOString()}",
-                "UpdatedAt": "${updatedAt.toISOString()}",
-                "Slug": "${slug}",
-                "Status": "${status}"
-            }`;
-
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutName);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutAddressId);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutDescription);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutOrganizerId);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutStartAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutEndAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutCreatedAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutUpdatedAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutSlug);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutStatus);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromJSON(jsonWithoutTags);
-      }).toThrow(ModelMappingError);
-    });
-  });
-
-  describe("fromObject", () => {
-    it("should create an instance of EventDto from an object", () => {
-      const obj = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      let event = EventDtoMapper.fromObject(obj);
-      event = event as EventDto;
-
-      expect(event.Name).toBe(name);
-      expect(event.AddressId).toBe(addressId);
-      expect(event.Description).toBe(description);
-      expect(event.OrganizerId).toBe(organizerId);
-      expect(event.StartAt).toEqual(startAt);
-      expect(event.EndAt).toEqual(endAt);
-      expect(event.CreatedAt).toEqual(createdAt);
-      expect(event.UpdatedAt).toEqual(updatedAt);
-      expect(event.Slug).toBe(slug);
-      expect(event.Status).toBe(status);
-      expect(event.Tags).toEqual(tags);
-    });
-
-    it("should return null if the object is invalid", () => {
-      const invalidObj = {
-        Name: 1,
-        AddressId: null,
-        Description: 65,
-        OrganizerId: true,
-        StartAt: "abc",
-        EndAt: NaN,
-        CreatedAt: -1,
-        UpdatedAt: "true",
-        Slug: undefined,
-        StatusId: -45,
-        Tags: "no tags",
-      };
-
-      const objWithoutName = {
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutAddressId = {
-        Name: name,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutDescription = {
-        Name: name,
-        AddressId: addressId,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutOrganizerId = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutStartAt = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutEndAt = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutCreatedAt = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutUpdatedAt = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        Slug: slug,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutSlug = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Status: status,
-        Tags: tags,
-      };
-
-      const objWithoutStatusId = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Tags: tags,
-      };
-
-      const objWithoutTags = {
-        Name: name,
-        AddressId: addressId,
-        Description: description,
-        OrganizerId: organizerId,
-        StartAt: startAt,
-        EndAt: endAt,
-        CreatedAt: createdAt,
-        UpdatedAt: updatedAt,
-        Slug: slug,
-        Status: status,
-      };
-
-      expect(() => {
-        EventDtoMapper.fromObject(invalidObj);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutName);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutAddressId);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutDescription);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutOrganizerId);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutStartAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutEndAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutCreatedAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutUpdatedAt);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutSlug);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutStatusId);
-      }).toThrow(ModelMappingError);
-      expect(() => {
-        EventDtoMapper.fromObject(objWithoutTags);
-      }).toThrow(ModelMappingError);
-    });
-  });
-});
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts
deleted file mode 100644
index 8d8df35f..00000000
--- a/Client/reasn-client/packages/common/__tests__/schemas/ImageDto.test.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { ImageDto, ImageDtoMapper } from "@reasn/common/src/schemas/ImageDto";
-import { ObjectType } from "@reasn/common/src/enums/schemasEnums";
-import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
-
-describe("ImageDto", () => {
-  const imageData = "Test Image";
-  const objectId = 1;
-  const objectType = ObjectType.USER;
-
-  describe("fromJson", () => {
-    it("should create an instance of ImageDto from JSON string", () => {
-      const json = `{
-                "ImageData": "${imageData}",
-                "ObjectId": ${objectId},
-                "ObjectType": "${objectType}"
-            }`;
-
-      let image = ImageDtoMapper.fromJSON(json);
-      image = image as ImageDto;
-
-      expect(image.ImageData).toBe(imageData);
-      expect(image.ObjectId).toBe(objectId);
-      expect(image.ObjectType).toBe(objectType);
-    });
-
-    it("should return null if the JSON string is empty", () => {
-      expect(() => ImageDtoMapper.fromJSON("")).toThrow(ModelMappingError);
-    });
-
-    it("should throw an error when providing json without each property individually", () => {
-      const jsonWithoutImageData = `{
-                "ObjectId": ${objectId},
-                "ObjectType": "${objectType}"
-            }`;
-
-      const jsonWithoutObjectId = `{
-                "ImageData": "${imageData}",
-                "ObjectType": "${objectType}"
-            }`;
-
-      const jsonWithoutObjectTypeId = `{
-                "ImageData": "${imageData}",
-                "ObjectId": ${objectId}
-            }`;
-
-      expect(() => ImageDtoMapper.fromJSON(jsonWithoutImageData)).toThrow(
-        ModelMappingError,
-      );
-      expect(() => ImageDtoMapper.fromJSON(jsonWithoutObjectId)).toThrow(
-        ModelMappingError,
-      );
-      expect(() => ImageDtoMapper.fromJSON(jsonWithoutObjectTypeId)).toThrow(
-        ModelMappingError,
-      );
-    });
-  });
-
-  describe("fromObject", () => {
-    it("should create an instance of ImageDto from an object", () => {
-      const object = {
-        ImageData: imageData,
-        ObjectId: objectId,
-        ObjectType: objectType,
-      };
-
-      let image = ImageDtoMapper.fromObject(object);
-      image = image as ImageDto;
-
-      expect(image.ImageData).toBe(imageData);
-      expect(image.ObjectId).toBe(objectId);
-      expect(image.ObjectType).toBe(objectType);
-    });
-
-    it("should throw an error if the object is invalid", () => {
-      const object = {
-        ImageData: true,
-        ObjectId: null,
-        ObjectType: undefined,
-      };
-
-      const objectWithoutImageData = {
-        ObjectId: objectId,
-        ObjectType: objectType,
-      };
-
-      const objectWithoutObjectId = {
-        ImageData: imageData,
-        ObjectType: objectType,
-      };
-
-      const objectWithoutObjectType = {
-        ImageData: imageData,
-        ObjectId: objectId,
-      };
-
-      expect(() => ImageDtoMapper.fromObject(object)).toThrow(
-        ModelMappingError,
-      );
-      expect(() => ImageDtoMapper.fromObject(objectWithoutImageData)).toThrow(
-        ModelMappingError,
-      );
-      expect(() => ImageDtoMapper.fromObject(objectWithoutObjectId)).toThrow(
-        ModelMappingError,
-      );
-      expect(() => ImageDtoMapper.fromObject(objectWithoutObjectType)).toThrow(
-        ModelMappingError,
-      );
-    });
-  });
-});
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts
index af828f5f..ea1fd21d 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/InterestDto.test.ts
@@ -10,13 +10,13 @@ describe("InterestDto", () => {
   describe("fromJson", () => {
     it("should create an instance of InterestDto from JSON string", () => {
       const json = `{
-                "Name": "${name}"
+                "name": "${name}"
             }`;
 
       let interest = InterestDtoMapper.fromJSON(json);
       interest = interest as InterestDto;
 
-      expect(interest.Name).toBe(name);
+      expect(interest.name).toBe(name);
     });
 
     it("should return null if the JSON string is empty", () => {
@@ -35,13 +35,13 @@ describe("InterestDto", () => {
   describe("fromObject", () => {
     it("should create an instance of InterestDto from an object", () => {
       const object = {
-        Name: name,
+        name: name,
       };
 
       let interest = InterestDtoMapper.fromObject(object);
       interest = interest as InterestDto;
 
-      expect(interest.Name).toBe(name);
+      expect(interest.name).toBe(name);
     });
 
     it("should throw an error if the object is invalid", () => {
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts
index 68ee9c81..e3fbf8ef 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/ParameterDto.test.ts
@@ -11,15 +11,15 @@ describe("ParameterDto", () => {
   describe("fromJson", () => {
     it("should create an instance of ParameterDto from JSON string", () => {
       const json = `{
-                "Key": "${key}",
-                "Value": "${value}"
+                "key": "${key}",
+                "value": "${value}"
             }`;
 
       let parameter = ParameterDtoMapper.fromJSON(json);
       parameter = parameter as ParameterDto;
 
-      expect(parameter.Key).toBe(key);
-      expect(parameter.Value).toBe(value);
+      expect(parameter.key).toBe(key);
+      expect(parameter.value).toBe(value);
     });
 
     it("should return null if the JSON string is empty", () => {
@@ -28,11 +28,11 @@ describe("ParameterDto", () => {
 
     it("should throw an error when providing json without each property individually", () => {
       const jsonWithoutKey = `{
-                "Value": "${value}"
+                "value": "${value}"
             }`;
 
       const jsonWithoutValue = `{
-                "Key": "${key}"
+                "key": "${key}"
             }`;
 
       expect(() => ParameterDtoMapper.fromJSON(jsonWithoutKey)).toThrow(
@@ -47,29 +47,29 @@ describe("ParameterDto", () => {
   describe("fromObject", () => {
     it("should create an instance of ParameterDto from an object", () => {
       const object = {
-        Key: key,
-        Value: value,
+        key: key,
+        value: value,
       };
 
       let parameter = ParameterDtoMapper.fromObject(object);
       parameter = parameter as ParameterDto;
 
-      expect(parameter.Key).toBe(key);
-      expect(parameter.Value).toBe(value);
+      expect(parameter.key).toBe(key);
+      expect(parameter.value).toBe(value);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        Key: true,
-        Value: null,
+        key: true,
+        value: null,
       };
 
       const objectWithoutKey = {
-        Value: value,
+        value: value,
       };
 
       const objectWithoutValue = {
-        Key: key,
+        key: key,
       };
 
       expect(() => ParameterDtoMapper.fromObject(object)).toThrow(
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts
index 8218b83a..bea32185 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/ParticipantDto.test.ts
@@ -13,17 +13,17 @@ describe("ParticipantDto", () => {
   describe("fromJson", () => {
     it("should create an instance of ParticipantDto from JSON string", () => {
       const json = `{
-                "EventSlug": "${eventSlug}",
-                "Username": "${username}",
-                "Status": "${status}"
+                "eventSlug": "${eventSlug}",
+                "username": "${username}",
+                "status": "${status}"
             }`;
 
       let participant = ParticipantDtoMapper.fromJSON(json);
       participant = participant as ParticipantDto;
 
-      expect(participant.EventSlug).toBe(eventSlug);
-      expect(participant.Username).toBe(username);
-      expect(participant.Status).toBe(status);
+      expect(participant.eventSlug).toBe(eventSlug);
+      expect(participant.username).toBe(username);
+      expect(participant.status).toBe(status);
     });
 
     it("should return null if the JSON string is empty", () => {
@@ -34,18 +34,18 @@ describe("ParticipantDto", () => {
 
     it("should throw an error when providing JSON without each property individually", () => {
       const jsonWithoutEventSlug = `{
-                "Username": "${username}",
-                "Status": "${status}"
+                "username": "${username}",
+                "status": "${status}"
             }`;
 
       const jsonWithoutUsername = `{
-                "EventSlug": "${eventSlug}",
-                "Status": "${status}"
+                "eventSlug": "${eventSlug}",
+                "status": "${status}"
             }`;
 
       const jsonWithoutStatus = `{
-                "EventSlug": "${eventSlug}",
-                "Username": "${username}"
+                "eventSlug": "${eventSlug}",
+                "username": "${username}"
             }`;
 
       expect(() => ParticipantDtoMapper.fromJSON(jsonWithoutEventSlug)).toThrow(
@@ -63,39 +63,39 @@ describe("ParticipantDto", () => {
   describe("fromObject", () => {
     it("should create an instance of ParticipantDto from an object", () => {
       const object = {
-        EventSlug: eventSlug,
-        Username: username,
-        Status: status,
+        eventSlug: eventSlug,
+        username: username,
+        status: status,
       };
 
       let participant = ParticipantDtoMapper.fromObject(object);
       participant = participant as ParticipantDto;
 
-      expect(participant.EventSlug).toBe(eventSlug);
-      expect(participant.Username).toBe(username);
-      expect(participant.Status).toBe(status);
+      expect(participant.eventSlug).toBe(eventSlug);
+      expect(participant.username).toBe(username);
+      expect(participant.status).toBe(status);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        EventStatus: true,
-        Username: null,
-        Status: "invalid",
+        eventStatus: true,
+        username: null,
+        status: "invalid",
       };
 
       const objectWithoutEventSlug = {
-        Username: username,
-        Status: status,
+        username: username,
+        status: status,
       };
 
       const objectWithoutUsername = {
-        EventSlug: eventSlug,
-        Status: status,
+        eventSlug: eventSlug,
+        status: status,
       };
 
       const objectWithoutStatus = {
-        EventSlug: eventSlug,
-        Username: username,
+        eventSlug: eventSlug,
+        username: username,
       };
 
       expect(() => ParticipantDtoMapper.fromObject(object)).toThrow(
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts
index aefba118..5f323d8d 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/TagDto.test.ts
@@ -7,13 +7,13 @@ describe("TagDto", () => {
   describe("fromJson", () => {
     it("should create an instance of TagDto from JSON string", () => {
       const json = `{
-                "Name": "${name}"
+                "name": "${name}"
             }`;
 
       let tag = TagDtoMapper.fromJSON(json);
       tag = tag as TagDto;
 
-      expect(tag.Name).toBe(name);
+      expect(tag.name).toBe(name);
     });
 
     it("should return null if the JSON string is empty", () => {
@@ -32,18 +32,18 @@ describe("TagDto", () => {
   describe("fromObject", () => {
     it("should create an instance of TagDto from an object", () => {
       const object = {
-        Name: name,
+        name: name,
       };
 
       let tag = TagDtoMapper.fromObject(object);
       tag = tag as TagDto;
 
-      expect(tag.Name).toBe(name);
+      expect(tag.name).toBe(name);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        Name: null,
+        name: null,
       };
 
       const objectWithoutName = {};
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
index fcefd5ad..83f28299 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/UserDto.test.ts
@@ -20,8 +20,8 @@ describe("UserDto", () => {
     zipCode: "12345",
   };
   const interests: UserInterestDto[] = [
-    { Interest: { Name: "Programming" }, Level: 5 },
-    { Interest: { Name: "Music" }, Level: 3 },
+    { interest: { name: "Programming" }, level: 5 },
+    { interest: { name: "Music" }, level: 3 },
   ];
 
   describe("fromJson", () => {
diff --git a/Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts b/Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts
index e8c1283c..f58c4e6b 100644
--- a/Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts
+++ b/Client/reasn-client/packages/common/__tests__/schemas/UserInterestDto.test.ts
@@ -6,21 +6,21 @@ import {
 import ModelMappingError from "@reasn/common/src/errors/ModelMappingError";
 
 describe("UserInterestDto", () => {
-  const interest = { Name: "Interest" } as InterestDto;
+  const interest = { name: "Interest" } as InterestDto;
   const level = 1;
 
   describe("fromJson", () => {
     it("should create an instance of UserInterestDto from JSON string", () => {
       const json = `{
-                "Interest": { "Name": "${interest.Name}" },
-                "Level": ${level}
+                "interest": { "name": "${interest.name}" },
+                "level": ${level}
             }`;
 
       let userInterest = UserInterestDtoMapper.fromJSON(json);
       userInterest = userInterest as UserInterestDto;
 
-      expect(userInterest.Interest.Name).toBe(interest.Name);
-      expect(userInterest.Level).toBe(level);
+      expect(userInterest.interest.name).toBe(interest.name);
+      expect(userInterest.level).toBe(level);
     });
 
     it("should return null if the JSON string is empty", () => {
@@ -31,11 +31,11 @@ describe("UserInterestDto", () => {
 
     it("should throw an error when providing json without each property individaully", () => {
       const jsonWithoutInterest = `{
-                "Level": ${level}
+                "level": ${level}
             }`;
 
       const jsonWithoutLevel = `{
-                "Interest": { "Name": "${interest.Name}" }
+                "interest": { "Name": "${interest.name}" }
             }`;
 
       expect(() => UserInterestDtoMapper.fromJSON(jsonWithoutInterest)).toThrow(
@@ -50,29 +50,29 @@ describe("UserInterestDto", () => {
   describe("fromObject", () => {
     it("should create an instance of UserInterestDto from an object", () => {
       const object = {
-        Interest: interest,
-        Level: level,
+        interest: interest,
+        level: level,
       };
 
       let userInterest = UserInterestDtoMapper.fromObject(object);
       userInterest = userInterest as UserInterestDto;
 
-      expect(userInterest.Interest.Name).toBe(interest.Name);
-      expect(userInterest.Level).toBe(level);
+      expect(userInterest.interest.name).toBe(interest.name);
+      expect(userInterest.level).toBe(level);
     });
 
     it("should throw an error if the object is invalid", () => {
       const object = {
-        Interest: { Name: 1 },
-        Level: true,
+        interest: { name: 1 },
+        level: true,
       };
 
       const objectWithoutInterest = {
-        Level: level,
+        level: level,
       };
 
       const objectWithoutLevel = {
-        Interest: interest,
+        interest: interest,
       };
 
       expect(() => UserInterestDtoMapper.fromObject(object)).toThrow(
diff --git a/Client/reasn-client/packages/common/src/schemas/CommentDto.ts b/Client/reasn-client/packages/common/src/schemas/CommentDto.ts
index abe54755..13f9aa75 100644
--- a/Client/reasn-client/packages/common/src/schemas/CommentDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/CommentDto.ts
@@ -2,14 +2,21 @@ import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const CommentDtoSchema = z.object({
-  EventId: z.number(),
-  Content: z.string().max(1024),
-  CreatedAt: z
+  eventSlug: z
+    .string()
+    .max(128)
+    .regex(/^[\p{L}\d]+[\p{L}\d-]*$/u),
+  content: z.string().max(1024),
+  createdAt: z
     .string()
     .datetime({ offset: true })
     .or(z.date())
     .transform((arg) => new Date(arg)),
-  UserId: z.number(),
+  username: z
+    .string()
+    .max(64)
+    .regex(/^[\p{L}\d._%+-]{4,}$/u),
+  userImageUrl: z.string().nullable(),
 });
 
 export type CommentDto = z.infer<typeof CommentDtoSchema>;
diff --git a/Client/reasn-client/packages/common/src/schemas/CommentRequest.ts b/Client/reasn-client/packages/common/src/schemas/CommentRequest.ts
new file mode 100644
index 00000000..53c95e53
--- /dev/null
+++ b/Client/reasn-client/packages/common/src/schemas/CommentRequest.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const CommentRequestSchema = z.object({
+  content: z.string().max(1024),
+});
+
+export type CommentRequest = z.infer<typeof CommentRequestSchema>;
diff --git a/Client/reasn-client/packages/common/src/schemas/EventDto.ts b/Client/reasn-client/packages/common/src/schemas/EventDto.ts
deleted file mode 100644
index a9c1e0ba..00000000
--- a/Client/reasn-client/packages/common/src/schemas/EventDto.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import ModelMappingError from "../errors/ModelMappingError";
-import { TagDtoSchema } from "./TagDto";
-import { EventStatus } from "../enums/schemasEnums";
-import { z } from "zod";
-
-export const EventDtoSchema = z.object({
-  Name: z.string().max(64),
-  AddressId: z.number(),
-  Description: z.string().max(4048),
-  OrganizerId: z.number(),
-  StartAt: z
-    .string()
-    .datetime({ offset: true })
-    .or(z.date())
-    .transform((arg) => new Date(arg)),
-  EndAt: z
-    .string()
-    .datetime({ offset: true })
-    .or(z.date())
-    .transform((arg) => new Date(arg)),
-  CreatedAt: z
-    .string()
-    .datetime({ offset: true })
-    .or(z.date())
-    .transform((arg) => new Date(arg)),
-  UpdatedAt: z
-    .string()
-    .datetime({ offset: true })
-    .or(z.date())
-    .transform((arg) => new Date(arg)),
-  Slug: z
-    .string()
-    .nullable()
-    .refine(
-      (value) =>
-        value === null ||
-        (value.length <= 128 && /^[\p{L}\d]+[\p{L}\d-]*$/u.test(value)),
-    ),
-
-  Status: z.nativeEnum(EventStatus),
-
-  Tags: z.array(TagDtoSchema),
-});
-
-export type EventDto = z.infer<typeof EventDtoSchema>;
-
-export const EventDtoMapper = {
-  fromObject: (entity: object): EventDto => {
-    const result = EventDtoSchema.safeParse(entity);
-    if (!result.success) {
-      throw new ModelMappingError(
-        "EventDto",
-        result.error.message,
-        result.error,
-      );
-    }
-    return result.data;
-  },
-  fromJSON: (jsonEntity: string): any => {
-    if (!jsonEntity) {
-      throw new ModelMappingError("EventDto", "Empty JSON string");
-    }
-    const result = EventDtoSchema.safeParse(JSON.parse(jsonEntity));
-    if (!result.success) {
-      throw new ModelMappingError(
-        "EventDto",
-        result.error.message,
-        result.error,
-      );
-    }
-    return result.data;
-  },
-};
diff --git a/Client/reasn-client/packages/common/src/schemas/EventResponse.ts b/Client/reasn-client/packages/common/src/schemas/EventResponse.ts
index 3eecda7e..e3a4e5a7 100644
--- a/Client/reasn-client/packages/common/src/schemas/EventResponse.ts
+++ b/Client/reasn-client/packages/common/src/schemas/EventResponse.ts
@@ -40,12 +40,15 @@ export const EventRespsoneSchema = z.object({
     .regex(/^[\p{L}\d]+[\p{L}\d-]*$/u)
     .nullable(),
   status: z.nativeEnum(EventStatus),
-  tags: z.array(TagDtoSchema),
-  parameters: z.array(ParameterDtoSchema),
-  participants: z.object({
-    interested: z.number(),
-    participating: z.number(),
-  }),
+  tags: z.array(TagDtoSchema).nullable(),
+  parameters: z.array(ParameterDtoSchema).nullable(),
+  participants: z
+    .object({
+      interested: z.number(),
+      participating: z.number(),
+    })
+    .nullable(),
+  images: z.array(z.string()).nullable(),
 });
 
 export type EventResponse = z.infer<typeof EventRespsoneSchema>;
diff --git a/Client/reasn-client/packages/common/src/schemas/ImageDto.ts b/Client/reasn-client/packages/common/src/schemas/ImageDto.ts
deleted file mode 100644
index 5af26865..00000000
--- a/Client/reasn-client/packages/common/src/schemas/ImageDto.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import ModelMappingError from "../errors/ModelMappingError";
-import { ObjectType } from "../enums/schemasEnums";
-import { z } from "zod";
-
-export const ImageDtoSchema = z.object({
-  ImageData: z.string(),
-  ObjectId: z.number(),
-  ObjectType: z.nativeEnum(ObjectType),
-});
-
-export type ImageDto = z.infer<typeof ImageDtoSchema>;
-
-export const ImageDtoMapper = {
-  fromObject: (entity: object): ImageDto => {
-    const result = ImageDtoSchema.safeParse(entity);
-    if (!result.success) {
-      throw new ModelMappingError(
-        "ImageDto",
-        result.error.message,
-        result.error,
-      );
-    }
-    return result.data;
-  },
-  fromJSON: (jsonEntity: string): any => {
-    if (!jsonEntity) {
-      throw new ModelMappingError("ImageDto", "Empty JSON string");
-    }
-    const result = ImageDtoSchema.safeParse(JSON.parse(jsonEntity));
-    if (!result.success) {
-      throw new ModelMappingError(
-        "ImageDto",
-        result.error.message,
-        result.error,
-      );
-    }
-    return result.data;
-  },
-};
diff --git a/Client/reasn-client/packages/common/src/schemas/InterestDto.ts b/Client/reasn-client/packages/common/src/schemas/InterestDto.ts
index 303e60c5..14bc0c03 100644
--- a/Client/reasn-client/packages/common/src/schemas/InterestDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/InterestDto.ts
@@ -2,7 +2,7 @@ import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const InterestDtoSchema = z.object({
-  Name: z
+  name: z
     .string()
     .max(32)
     .regex(/^\p{Lu}\p{Ll}+(?:\s\p{L}+)*$/u),
diff --git a/Client/reasn-client/packages/common/src/schemas/ParameterDto.ts b/Client/reasn-client/packages/common/src/schemas/ParameterDto.ts
index 8006e2be..64daebec 100644
--- a/Client/reasn-client/packages/common/src/schemas/ParameterDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/ParameterDto.ts
@@ -2,11 +2,11 @@ import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const ParameterDtoSchema = z.object({
-  Key: z
+  key: z
     .string()
     .max(32)
     .regex(/^\p{L}+(?:\s\p{L}+)*$/u),
-  Value: z
+  value: z
     .string()
     .max(64)
     .regex(/^[\p{L}\d]+(?:\s[\p{L}\d]+)*$/u),
diff --git a/Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts b/Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts
index 2f687e8b..d46baf87 100644
--- a/Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/ParticipantDto.ts
@@ -3,9 +3,9 @@ import { ParticipantStatus } from "../enums/schemasEnums";
 import { z } from "zod";
 
 export const ParticipantDtoSchema = z.object({
-  EventSlug: z.string(),
-  Username: z.string(),
-  Status: z.nativeEnum(ParticipantStatus),
+  eventSlug: z.string(),
+  username: z.string(),
+  status: z.nativeEnum(ParticipantStatus),
 });
 
 export type ParticipantDto = z.infer<typeof ParticipantDtoSchema>;
diff --git a/Client/reasn-client/packages/common/src/schemas/TagDto.ts b/Client/reasn-client/packages/common/src/schemas/TagDto.ts
index b48334ea..6803b4f7 100644
--- a/Client/reasn-client/packages/common/src/schemas/TagDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/TagDto.ts
@@ -2,7 +2,7 @@ import ModelMappingError from "../errors/ModelMappingError";
 import { z } from "zod";
 
 export const TagDtoSchema = z.object({
-  Name: z
+  name: z
     .string()
     .max(64)
     .regex(/^\p{L}+(?:\s\p{L}+)*$/u),
diff --git a/Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts b/Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts
index c561e470..ab3fb69e 100644
--- a/Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts
+++ b/Client/reasn-client/packages/common/src/schemas/UserInterestDto.ts
@@ -3,8 +3,8 @@ import { InterestDtoSchema } from "../schemas/InterestDto";
 import { z } from "zod";
 
 export const UserInterestDtoSchema = z.object({
-  Interest: InterestDtoSchema,
-  Level: z.number(),
+  interest: InterestDtoSchema,
+  level: z.number(),
 });
 
 export type UserInterestDto = z.infer<typeof UserInterestDtoSchema>;

From f90973a404ff5b7d93062895286c1bce916846d8 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 17:32:52 +0200
Subject: [PATCH 11/13] [RSN-83] - Implemented UI of user edit page (#74)

* feat: implemented UI of user edit page

* feat: changed middleware
---
 .../apps/web/app/me/edit/page.tsx             |   8 +
 .../web/app/user/[username]/edit/page.tsx     |   8 +
 Client/reasn-client/apps/web/middleware.ts    |   7 +-
 .../src/components/shared/form/Dropdown.tsx   |   3 +
 .../packages/ui/src/components/web/index.tsx  |   1 +
 .../src/components/web/main/QuickFilters.tsx  |   2 +
 .../web/user/SharedEditUserPage.tsx           | 193 ++++++++++++++++++
 .../components/web/user/SharedUserPage.tsx    |   8 +-
 8 files changed, 228 insertions(+), 2 deletions(-)
 create mode 100644 Client/reasn-client/apps/web/app/me/edit/page.tsx
 create mode 100644 Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx

diff --git a/Client/reasn-client/apps/web/app/me/edit/page.tsx b/Client/reasn-client/apps/web/app/me/edit/page.tsx
new file mode 100644
index 00000000..6b6057be
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/me/edit/page.tsx
@@ -0,0 +1,8 @@
+import { SharedEditUserPage } from "@reasn/ui/src/components/web";
+import React from "react";
+
+const MeEditPage = () => {
+  return <SharedEditUserPage username="memememe" />;
+};
+
+export default MeEditPage;
diff --git a/Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx b/Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx
new file mode 100644
index 00000000..74a1246c
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/user/[username]/edit/page.tsx
@@ -0,0 +1,8 @@
+import { SharedEditUserPage } from "@reasn/ui/src/components/web";
+import React from "react";
+
+const UserEditPage = () => {
+  return <SharedEditUserPage username="memememe" />;
+};
+
+export default UserEditPage;
diff --git a/Client/reasn-client/apps/web/middleware.ts b/Client/reasn-client/apps/web/middleware.ts
index 55effad4..1b59c67f 100644
--- a/Client/reasn-client/apps/web/middleware.ts
+++ b/Client/reasn-client/apps/web/middleware.ts
@@ -9,6 +9,10 @@ export const middleware = (req: NextRequest) => {
 
   const isAuthPath = path.startsWith("/login") || path.startsWith("/register");
 
+  if (path.startsWith("/user") && session.user?.role !== UserRole.ADMIN) {
+    return NextResponse.redirect(new URL(path.replace("/edit", ""), req.url));
+  }
+
   if (!session.isAuthenticated()) {
     if (isAuthPath) return NextResponse.next();
     return NextResponse.redirect(new URL("/login", req.url));
@@ -20,7 +24,7 @@ export const middleware = (req: NextRequest) => {
 
   if (path.startsWith("/events") && session.user?.role === UserRole.USER) {
     return NextResponse.redirect(new URL("/events", req.url));
-  }
+  }  
 };
 
 export const config = {
@@ -29,6 +33,7 @@ export const config = {
     "/events/(.*)/(.*)",
     "/me",
     "/me/(.*)",
+    "/user/(.*)/edit",
     "/login",
     "/register",
     "/register/(.*)",
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
index 6a2ddb7c..ba01bb03 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
@@ -8,6 +8,7 @@ import { CaretDown, CaretUp } from "../../../icons";
 interface DropdownProps {
   label: string;
   options: string[];
+  className?: string;
 }
 
 interface SingleDropdownProps extends DropdownProps {
@@ -80,6 +81,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => {
     options,
     selectedOption,
     selectedOptionClass,
+    className,
     setSelectedOption,
   } = props;
 
@@ -115,6 +117,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => {
       className={clsx(
         "relative flex w-full cursor-pointer flex-col gap-2 rounded-lg bg-[#232327]",
         { "rounded-b-none": isExpanded },
+        className,
       )}
       onClick={toggleExpanded}
       ref={ref}
diff --git a/Client/reasn-client/packages/ui/src/components/web/index.tsx b/Client/reasn-client/packages/ui/src/components/web/index.tsx
index 7474135d..f0ad05bf 100644
--- a/Client/reasn-client/packages/ui/src/components/web/index.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/index.tsx
@@ -2,3 +2,4 @@ export { HeroSection } from "./main/HeroSection";
 export { QuickFilters, QuickFilterButton } from "./main/QuickFilters";
 export { CTASection } from "./main/CTASection";
 export { SharedUserPage } from "./user/SharedUserPage";
+export { SharedEditUserPage } from "./user/SharedEditUserPage";
diff --git a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
index 4a95ce2d..8acc21eb 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import clsx from "clsx";
 import React, { useState } from "react";
 import { Card, CardVariant } from "@reasn/ui/src/components/shared";
diff --git a/Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx b/Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx
new file mode 100644
index 00000000..b21350c0
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/web/user/SharedEditUserPage.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import React, { ChangeEvent, useRef, useState } from "react";
+import {
+  ButtonBase,
+  FloatingInput,
+  SearchMultiDropdown,
+  SingleDropdown,
+} from "../../shared/form";
+import { UserRole } from "@reasn/common/src/enums/schemasEnums";
+import { Upload } from "../../../icons";
+
+const MOCK_TAGS = [
+  "abcd",
+  "efgh",
+  "ijkl",
+  "mnop",
+  "qrst",
+  "uvwx",
+  "yzab",
+  "cdef",
+  "ghij",
+  "dada",
+  "vvvv",
+  "bgbfgb",
+  "nfnfnf",
+  "mmjmjm",
+  ",lkyt",
+  "t554",
+  "fsdfs",
+  "hhhhh",
+  "fsf",
+  "u234ghhvwx",
+  "nh",
+  "sdfsf4",
+  "ses5",
+];
+
+interface SharedEditUserPageProps {
+  username: string;
+}
+
+export const SharedEditUserPage = (props: SharedEditUserPageProps) => {
+  const { username } = props;
+  const [tags, setTags] = useState<string[]>(MOCK_TAGS.slice(0, 5));
+  const [selectedRole, setSelectedRole] = useState<string>(UserRole.USER);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+  const [img, setImg] = useState<string>(
+    "https://avatars.githubusercontent.com/u/63869461?v=4",
+  );
+
+  const isAdmin = username === "memememe";
+
+  const handleImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event?.target?.files?.[0];
+    if (file) {
+      const fileURL = URL.createObjectURL(file);
+      setImg(fileURL);
+    }
+  };
+
+  return (
+    <form className="flex w-full flex-col gap-24">
+      <div className="flex h-fit w-full flex-col items-center gap-10 md:flex-row">
+        <div className="group relative h-32 w-32 rounded-full bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-1">
+          <img
+            src={img}
+            alt="avatar"
+            className="pointer-events-none relative z-10 h-full w-full rounded-full object-cover"
+          />
+          <div className="pointer-events-none absolute right-[-150%] top-[-175%] z-0 h-[400%] w-[400%] rounded-full bg-green-400 opacity-15 blur-3xl"></div>
+          <div
+            onClick={() => {
+              const element = imageInputRef.current;
+              if (element instanceof HTMLInputElement) {
+                element.click();
+              }
+            }}
+            className="absolute left-0 top-0 z-20 flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-black opacity-0 duration-300 group-hover:opacity-50"
+          >
+            <Upload className="h-10 w-10 fill-white" />
+          </div>
+          <input
+            type="file"
+            hidden
+            name="img"
+            accept="image/png, image/jpeg"
+            onChange={handleImageUpload}
+            ref={imageInputRef}
+          />
+        </div>
+        <FloatingInput
+          type="text"
+          label="nazwa użytkownika"
+          name="username"
+          defaultValue={username}
+        />
+        {isAdmin && (
+          <div className="mx-auto w-1/2 md:ml-auto md:mr-0 md:w-1/5">
+            <SingleDropdown
+              label="Rola"
+              options={Object.values(UserRole)}
+              selectedOption={selectedRole}
+              setSelectedOption={setSelectedRole}
+            />
+          </div>
+        )}
+        <ButtonBase text="zapisz" />
+      </div>
+      <div className="flex w-full flex-col gap-24">
+        <div className="flex w-full flex-row flex-wrap gap-8">
+          <h2 className="w-full text-3xl font-semibold">Dane kontaktowe</h2>
+          <FloatingInput
+            type="text"
+            label="imię"
+            name="name"
+            defaultValue="Jan"
+            className="grow sm:w-1/2 sm:grow-0"
+          />
+          <FloatingInput
+            type="text"
+            label="nazwisko"
+            name="surname"
+            defaultValue="Kowalski"
+            className="grow"
+          />
+          <FloatingInput
+            type="email"
+            label="email"
+            name="email"
+            defaultValue="jan@kowalski.pl"
+            className="grow sm:w-1/2 sm:grow-0"
+          />
+          <FloatingInput
+            type="tel"
+            label="numer telefonu"
+            name="phone"
+            defaultValue="123456789"
+            className="grow"
+          />
+        </div>
+        <input type="hidden" name="role" defaultValue="USER" />
+        <div className="flex w-full flex-row flex-wrap gap-8">
+          <h2 className="w-full text-3xl font-semibold">Dane adresowe</h2>
+          <FloatingInput
+            type="text"
+            label="miasto"
+            name="city"
+            defaultValue="Warszawa"
+            className="grow"
+          />
+          <FloatingInput
+            type="text"
+            label="kraj"
+            name="country"
+            defaultValue="Polska"
+            className="grow"
+          />
+          <FloatingInput
+            type="text"
+            label="ulica"
+            name="street"
+            defaultValue="Kwiatowa"
+            className="w-full"
+          />
+          <FloatingInput
+            type="text"
+            label="województwo"
+            name="state"
+            defaultValue="Mazowieckie"
+            className="grow"
+          />
+          <FloatingInput
+            type="text"
+            label="kod pocztowy"
+            name="postcode"
+            defaultValue="00-000"
+            className="grow"
+          />
+        </div>
+        <div className="flex w-full flex-row flex-wrap gap-8">
+          <h2 className="w-full text-3xl font-semibold">Zainteresowania</h2>
+          <SearchMultiDropdown
+            label="Wyszukaj zainteresowania"
+            options={MOCK_TAGS}
+            selectedOptions={tags}
+            setSelectedOptions={setTags}
+          />
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx b/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx
index 6b159f76..1cb8921e 100644
--- a/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { ButtonBase } from "../../shared/form";
 import { Card, CardVariant, Interest } from "../../shared";
 import { QuickFilterButton } from "../main/QuickFilters";
+import { useRouter } from "next/navigation";
 
 interface SharedUserPageProps {
   username: string;
@@ -12,6 +13,11 @@ interface SharedUserPageProps {
 export const SharedUserPage = (props: SharedUserPageProps) => {
   const { username } = props;
   const isMePage = username === "memememe";
+  const router = useRouter();
+
+  const handleEditButtonClick = () => {
+    router.push("/me/edit");
+  };
 
   return (
     <div className="relative flex w-full flex-col gap-10">
@@ -38,7 +44,7 @@ export const SharedUserPage = (props: SharedUserPageProps) => {
         {isMePage && (
           <ButtonBase
             text="edytuj profil"
-            onClick={() => {}}
+            onClick={handleEditButtonClick}
             className="ml-auto"
           />
         )}

From 31aa600079a93ace01d008e0275c9db96ea16fb4 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 19:36:34 +0200
Subject: [PATCH 12/13] [RSN-75] - Implemented swiping for suggestions (#77)

---
 .../apps/web/app/events/suggestions/page.tsx  | 141 ++++++++++++++++++
 Client/reasn-client/apps/web/middleware.ts    |   2 +-
 .../reasn-client/apps/web/tailwind.config.js  |  22 +++
 .../ui/src/components/shared/Card.tsx         |  30 ++++
 .../ui/src/components/shared/Comment.tsx      |  17 +--
 .../packages/ui/src/icons/Add.tsx             |  40 +++++
 .../packages/ui/src/icons/Dismiss.tsx         |  40 +++++
 .../packages/ui/src/icons/Question.tsx        |  40 +++++
 .../packages/ui/src/icons/index.tsx           |   3 +
 9 files changed, 320 insertions(+), 15 deletions(-)
 create mode 100644 Client/reasn-client/apps/web/app/events/suggestions/page.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Add.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Dismiss.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Question.tsx

diff --git a/Client/reasn-client/apps/web/app/events/suggestions/page.tsx b/Client/reasn-client/apps/web/app/events/suggestions/page.tsx
new file mode 100644
index 00000000..37086ef5
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/events/suggestions/page.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { Card, CardVariant } from "@reasn/ui/src/components/shared";
+import { Add, Dismiss, Question } from "@reasn/ui/src/icons";
+import clsx from "clsx";
+import React, { MouseEvent, useState } from "react";
+
+const EventsSuggestionsPage = () => {
+  const [events, setEvents] = useState<number[]>([
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
+  ]);
+  const currentCardRef = React.useRef<HTMLDivElement>(null);
+  const nextCardRef = React.useRef<HTMLDivElement>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [action, setAction] = useState<"like" | "dislike" | "participate" | "">(
+    "",
+  );
+
+  const handleDismissEvent = (e: MouseEvent<HTMLElement>) => {
+    currentCardRef.current?.classList.add("animate-fadeOutLeft");
+    setIsAnimating(true);
+    setAction("dislike");
+    setTimeout(() => {
+      currentCardRef.current?.classList.remove("animate-fadeOutLeft");
+      setEvents((prev) => prev.slice(1));
+      setIsAnimating(false);
+      setAction("");
+    }, 500);
+    e.stopPropagation();
+  };
+
+  const handleLikeEvent = (e: MouseEvent<HTMLElement>) => {
+    currentCardRef.current?.classList.add("animate-fadeOutDown");
+    setIsAnimating(true);
+    setAction("like");
+    setTimeout(() => {
+      currentCardRef.current?.classList.remove("animate-fadeOutDown");
+      setEvents((prev) => prev.slice(1));
+      setIsAnimating(false);
+      setAction("");
+    }, 500);
+    e.stopPropagation();
+  };
+
+  const handleParticipateInEvent = (e: MouseEvent<HTMLElement>) => {
+    currentCardRef.current?.classList.add("animate-fadeOutRight");
+    setIsAnimating(true);
+    setAction("participate");
+    setTimeout(() => {
+      currentCardRef.current?.classList.remove("animate-fadeOutRight");
+      setEvents((prev) => prev.slice(1));
+      setIsAnimating(false);
+      setAction("");
+    }, 500);
+    e.stopPropagation();
+  };
+
+  return (
+    <div className="relative flex w-full flex-col items-center justify-center">
+      <div
+        className={clsx(
+          "absolute right-[-50%] top-[-25%] z-0 h-[50%] w-[200%] rounded-full blur-3xl",
+          "bg-blue-400 duration-1000",
+          { "opacity-30": action === "like" },
+          { "opacity-10": action !== "like" },
+        )}
+      ></div>
+      <div
+        className={clsx(
+          "absolute left-[-50%] top-[-25%] z-0 h-[100%] w-[100%] rounded-full blur-3xl",
+          "bg-red-400 duration-1000",
+          { "opacity-30": action === "dislike" },
+          { "opacity-10": action !== "dislike" },
+        )}
+      ></div>
+      <div
+        className={clsx(
+          "absolute right-[-50%] top-[-25%] z-0 h-[100%] w-[100%] rounded-full blur-3xl",
+          "bg-green-400 duration-1000",
+          { "opacity-30": action === "participate" },
+          { "opacity-10": action !== "participate" },
+        )}
+      ></div>
+      <div className="relative h-[60vh] w-full items-center justify-center">
+        {events.map((val, idx) => (
+          <div
+            key={val + idx}
+            className={clsx(
+              "absolute left-1/2 duration-500",
+              { "pointer-events-none": idx !== 0 },
+              { "opacity-5 blur-sm": idx > 1 || (idx === 1 && !isAnimating) },
+              { "opacity-1 blur-none": idx === 1 && isAnimating },
+              { "opacity-1 pointer-events-auto": idx === 0 },
+            )}
+            style={{
+              transform: `translate(-50%, ${idx * 1.5}%)`,
+              zIndex: `${11 - idx}`,
+            }}
+            ref={idx === 0 ? currentCardRef : idx === 1 ? nextCardRef : null}
+          >
+            <Card variant={CardVariant.Swiping} event="Abc" />
+          </div>
+        ))}
+      </div>
+      <div className="flex w-full items-center justify-center gap-10 lg:gap-24">
+        <div
+          onClick={handleDismissEvent}
+          className={clsx(
+            "flex h-12 w-28 cursor-pointer items-center justify-center rounded-full",
+            "bg-red-500 bg-opacity-40 p-2 text-2xl font-semibold",
+            "group duration-300 hover:bg-red-700",
+          )}
+        >
+          <Dismiss className="h-5 w-5 fill-red-500 duration-300 group-hover:fill-black" />
+        </div>
+        <div
+          onClick={handleLikeEvent}
+          className={clsx(
+            "flex h-12 w-16 cursor-pointer items-center justify-center rounded-full",
+            "bg-blue-400 bg-opacity-40 p-2 text-2xl font-semibold",
+            "group duration-300 hover:bg-blue-700",
+          )}
+        >
+          <Question className="h-5 w-5 fill-blue-400 duration-300 group-hover:fill-black" />
+        </div>
+        <div
+          onClick={handleParticipateInEvent}
+          className={clsx(
+            "flex h-12 w-28 cursor-pointer items-center justify-center rounded-full",
+            "bg-green-500 bg-opacity-40 p-2 text-2xl font-semibold",
+            "group duration-300 hover:bg-green-700",
+          )}
+        >
+          <Add className="h-5 w-5 fill-green-500 duration-300 group-hover:fill-black" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventsSuggestionsPage;
diff --git a/Client/reasn-client/apps/web/middleware.ts b/Client/reasn-client/apps/web/middleware.ts
index 1b59c67f..e51a1c54 100644
--- a/Client/reasn-client/apps/web/middleware.ts
+++ b/Client/reasn-client/apps/web/middleware.ts
@@ -24,7 +24,7 @@ export const middleware = (req: NextRequest) => {
 
   if (path.startsWith("/events") && session.user?.role === UserRole.USER) {
     return NextResponse.redirect(new URL("/events", req.url));
-  }  
+  }
 };
 
 export const config = {
diff --git a/Client/reasn-client/apps/web/tailwind.config.js b/Client/reasn-client/apps/web/tailwind.config.js
index 6ca42768..d7a84ba7 100644
--- a/Client/reasn-client/apps/web/tailwind.config.js
+++ b/Client/reasn-client/apps/web/tailwind.config.js
@@ -12,6 +12,28 @@ module.exports = {
       screens: {
         xs: "460px",
       },
+      keyframes: {
+        fadeOutRight: {
+          "0%": { transform: "translateX(-50%) rotate(0deg)", opacity: 1 },
+          "100%": { transform: "translateX(100%) rotate(30deg)", opacity: 0 },
+        },
+        fadeOutLeft: {
+          "0%": { transform: "translateX(-50%) rotate(0deg)", opacity: 1 },
+          "100%": { transform: "translateX(-150%) rotate(-30deg)", opacity: 0 },
+        },
+        fadeOutDown: {
+          "0%": { transform: "translateX(-50%) translateY(0%)", opacity: 1 },
+          "100%": {
+            transform: "translateX(-50%) translateY(-100%)",
+            opacity: 0,
+          },
+        },
+      },
+      animation: {
+        fadeOutRight: "fadeOutRight 0.5s ease-in-out forwards",
+        fadeOutLeft: "fadeOutLeft 0.5s ease-in-out forwards",
+        fadeOutDown: "fadeOutDown 0.5s ease-in-out forwards",
+      },
     },
   },
   plugins: [],
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
index 73a92e01..af29026b 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
@@ -10,6 +10,7 @@ export enum CardVariant {
   Big,
   Tile,
   List,
+  Swiping,
 }
 
 export interface CardProps {
@@ -31,6 +32,7 @@ export const Card = (props: Readonly<CardProps>) => {
       {variant === CardVariant.Big && <CardBig event={event} />}
       {variant === CardVariant.Tile && <CardTile event={event} />}
       {variant === CardVariant.List && <CardList event={event} />}
+      {variant === CardVariant.Swiping && <CardSwiping event={event} />}
     </div>
   );
 };
@@ -145,3 +147,31 @@ const CardList = ({ event }: { event: string }) => {
     </div>
   );
 };
+
+const CardSwiping = ({ event }: { event: string }) => {
+  return (
+    <div className="group relative h-[45vh] w-[20vw] min-w-[15em] cursor-pointer overflow-clip rounded-3xl md:h-[50vh] md:min-h-[10em] md:min-w-[20em] lg:min-h-[25em] lg:min-w-[25em]">
+      <img
+        src={MOCK_IMG_URL}
+        alt=""
+        className="absolute left-0 top-0 h-full object-cover"
+      />
+      <div className="relative flex h-2/3 w-full flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
+        <div className="flex flex-wrap gap-1 text-xs text-[#cacaca]">
+          <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
+          <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
+          <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
+          <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
+        </div>
+        <h2 className="w-4/5 break-words text-3xl font-semibold">
+          Koncert fagaty na PWR w C-16
+        </h2>
+        <p className="hidden text-base text-[#cacaca] md:block">
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde
+          quisquam maiores doloremque molestiae ducimus, distinctio accusamus
+          sed voluptatem eius itaque.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
index a979009e..cd83ebc3 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
@@ -1,26 +1,15 @@
 import React from "react";
-import {
-  CommentDto,
-  CommentDtoMapper,
-} from "@reasn/common/src/schemas/CommentDto";
 import { ButtonBase, FloatingTextarea } from "./form";
 
 interface CommentProps {
-  comment?: CommentDto;
+  comment?: string;
 }
 
 export const Comment = (props: CommentProps) => {
-  const comment = CommentDtoMapper.fromObject({
-    EventId: 1,
-    Content:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta quidem sapiente odit maxime. Officiis, error laborum. Voluptatem quibusdam mollitia possimus?",
-    CreatedAt: new Date(),
-    UserId: 1,
-  });
-
+  const { comment } = props;
   return (
     <div className="flex flex-col gap-4 rounded-md bg-[#4b4e526d] p-2">
-      <p className="font-thin">{comment.Content}</p>
+      <p className="font-thin">{comment}</p>
       <div className="flex items-center gap-2">
         <div className="relative rounded-full bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-[2px]">
           <img
diff --git a/Client/reasn-client/packages/ui/src/icons/Add.tsx b/Client/reasn-client/packages/ui/src/icons/Add.tsx
new file mode 100644
index 00000000..9bea719a
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/Add.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { IconProps } from "./IconProps";
+
+export const Add = (props: IconProps) => {
+  const { className, colors, gradientTransform, onClick } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+      onClick={onClick}
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/Dismiss.tsx b/Client/reasn-client/packages/ui/src/icons/Dismiss.tsx
new file mode 100644
index 00000000..e99a0023
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/Dismiss.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { IconProps } from "./IconProps";
+
+export const Dismiss = (props: IconProps) => {
+  const { className, colors, gradientTransform, onClick } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+      onClick={onClick}
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="m4.21 4.387.083-.094a1 1 0 0 1 1.32-.083l.094.083L12 10.585l6.293-6.292a1 1 0 1 1 1.414 1.414L13.415 12l6.292 6.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083L12 13.415l-6.293 6.292a1 1 0 0 1-1.414-1.414L10.585 12 4.293 5.707a1 1 0 0 1-.083-1.32l.083-.094-.083.094Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/Question.tsx b/Client/reasn-client/packages/ui/src/icons/Question.tsx
new file mode 100644
index 00000000..fb39d31e
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/Question.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { IconProps } from "./IconProps";
+
+export const Question = (props: IconProps) => {
+  const { className, colors, gradientTransform, onClick } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="url(#gradient1)"
+      onClick={onClick}
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M12 4C9.238 4 7 6.238 7 9a1 1 0 0 0 2 0c0-1.658 1.342-3 3-3s3 1.342 3 3c0 .816-.199 1.294-.438 1.629-.262.365-.625.638-1.128.985l-.116.078c-.447.306-1.023.699-1.469 1.247-.527.648-.849 1.467-.849 2.561v.5a1 1 0 1 0 2 0v-.5c0-.656.178-1.024.4-1.299.257-.314.603-.552 1.114-.903l.053-.037c.496-.34 1.133-.786 1.62-1.468C16.7 11.081 17 10.183 17 9c0-2.762-2.238-5-5-5ZM12 21.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" />
+    </svg>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/index.tsx b/Client/reasn-client/packages/ui/src/icons/index.tsx
index 5cc581b4..b58c57dc 100644
--- a/Client/reasn-client/packages/ui/src/icons/index.tsx
+++ b/Client/reasn-client/packages/ui/src/icons/index.tsx
@@ -8,3 +8,6 @@ export { ArrowRight } from "./ArrowRight";
 export { Upload } from "./Upload";
 export { CaretDown } from "./CaretDown";
 export { CaretUp } from "./CaretUp";
+export { Add } from "./Add";
+export { Question } from "./Question";
+export { Dismiss } from "./Dismiss";

From 05849360d596975c86389a08ffd7a8e26b0fc8cb Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 19:53:17 +0200
Subject: [PATCH 13/13] [RSN-62] - Implemented slider for hero section (#78)

* feat: implemented slider for hero section

* feat: fixed overflow issues
---
 .../src/components/web/main/HeroSection.tsx   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
index a6424a94..76ac3384 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
@@ -1,8 +1,11 @@
-import React from "react";
-import { Fire } from "@reasn/ui/src/icons";
+import React, { useState } from "react";
+import { ArrowLeft, ArrowRight, Fire } from "@reasn/ui/src/icons";
 import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 
 export const HeroSection = () => {
+  const [currentCardIdx, setCurrentCardIdx] = useState(0);
+  const [cards, setCards] = useState<number[]>([0, 1, 2, 3, 4, 5]);
+
   return (
     <section className="flex h-[50vh] w-full flex-col items-center justify-center gap-[10%] lg:flex-row">
       <div className="relative z-10 hidden h-1/3 w-fit lg:block">
@@ -16,9 +19,30 @@ export const HeroSection = () => {
           to jest teraz <br /> na topie
         </h2>
       </div>
-      <div className="relative">
+      <div className="relative h-[30vh] w-[30vw] ">
         <div className='absolute right-[-25%] top-[-50%] z-0 h-[200%] w-[150%] rounded-full bg-gradient-to-r from-[#FF6363] to-[#1E34FF] opacity-5 blur-3xl content-[""]'></div>
-        <Card variant={CardVariant.Big} event={"edit"} />
+        <div className="w-full h-full overflow-hidden">
+          <div
+            className="flex h-full w-full gap-0 duration-300"
+            style={{ transform: `translateX(-${currentCardIdx * 100}%)` }}
+          >
+            {cards.map((card, idx) => (
+              <Card key={card} variant={CardVariant.Big} event={"edit"} />
+            ))}
+          </div>
+        </div>
+        {currentCardIdx > 0 && (
+          <ArrowLeft
+            onClick={() => setCurrentCardIdx(currentCardIdx - 1)}
+            className="absolute left-[-3rem] top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2"
+          />
+        )}
+        {currentCardIdx < cards.length - 1 && (
+          <ArrowRight
+            onClick={() => setCurrentCardIdx((idx) => idx + 1)}
+            className="absolute right-[-3rem] top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2"
+          />
+        )}
       </div>
     </section>
   );