diff --git a/Client/reasn-client/apps/web/app/layout.tsx b/Client/reasn-client/apps/web/app/layout.tsx
index 87c871bf..6e742d18 100644
--- a/Client/reasn-client/apps/web/app/layout.tsx
+++ b/Client/reasn-client/apps/web/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Footer, Navbar } from "@reasn/ui/src/components/shared";
 import "../styles/global.css";
 import "@reasn/ui/src/styles.css";
 
@@ -8,7 +9,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className="min-h-screen overflow-x-clip bg-[#161618] text-white">
+        <Navbar />
+        {children}
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/Client/reasn-client/apps/web/app/login/layout.tsx b/Client/reasn-client/apps/web/app/login/layout.tsx
new file mode 100644
index 00000000..cdc8ea08
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/login/layout.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const LoginLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+      {children}
+    </section>
+  );
+};
+
+export default LoginLayout;
diff --git a/Client/reasn-client/apps/web/app/login/page.tsx b/Client/reasn-client/apps/web/app/login/page.tsx
new file mode 100644
index 00000000..6c57b9fc
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/login/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const LoginPage = () => {
+  return <div>page</div>;
+};
+
+export default LoginPage;
diff --git a/Client/reasn-client/apps/web/app/page.tsx b/Client/reasn-client/apps/web/app/page.tsx
index 193f4241..69d1923e 100644
--- a/Client/reasn-client/apps/web/app/page.tsx
+++ b/Client/reasn-client/apps/web/app/page.tsx
@@ -5,16 +5,15 @@ import {
   HeroSection,
   QuickFilters,
 } from "@reasn/ui/src/components/web";
-import { Navbar, Footer } from "@reasn/ui/src/components/shared";
 
-export default function Web() {
+const Web = () => {
   return (
-    <div className="min-h-screen bg-[#161618] text-white">
-      <Navbar />
+    <>
       <HeroSection />
       <QuickFilters />
       <CTASection />
-      <Footer />
-    </div>
+    </>
   );
-}
+};
+
+export default Web;
diff --git a/Client/reasn-client/apps/web/app/register/layout.tsx b/Client/reasn-client/apps/web/app/register/layout.tsx
new file mode 100644
index 00000000..2bff494a
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/register/layout.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const RegisterLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+      {children}
+    </section>
+  );
+};
+
+export default RegisterLayout;
diff --git a/Client/reasn-client/apps/web/app/register/organizer/page.tsx b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
new file mode 100644
index 00000000..2b5807b9
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  ButtonBase,
+  FloatingInput,
+} from "@reasn/ui/src/components/shared/form";
+import React, { useRef, useState } from "react";
+
+const RegisterOrganizer = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleFormSubmit = () => {
+    console.log("form submitted");
+    formRef.current?.submit();
+  };
+
+  return (
+    <>
+      <div className="flex w-1/2 items-center justify-center">
+        <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>
+      </div>
+      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center 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">
+            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">
+            gdzie możemy cię znaleźć?
+          </p>
+        )}
+        <ButtonBase
+          text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
+          onClick={() =>
+            currentStep === 2
+              ? handleFormSubmit()
+              : setCurrentStep(currentStep + 1)
+          }
+        />
+      </div>
+      <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+    </>
+  );
+};
+
+export default RegisterOrganizer;
diff --git a/Client/reasn-client/apps/web/app/register/page.tsx b/Client/reasn-client/apps/web/app/register/page.tsx
new file mode 100644
index 00000000..05c14ae0
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/register/page.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React from "react";
+
+const RegisterMiddleware = () => {
+  const router = useRouter();
+
+  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="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10"
+          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>
+          <p className="text-lg font-semibold duration-500 group-hover:text-3xl">
+            Organizator
+          </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"
+          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">
+            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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RegisterMiddleware;
diff --git a/Client/reasn-client/apps/web/app/register/user/page.tsx b/Client/reasn-client/apps/web/app/register/user/page.tsx
new file mode 100644
index 00000000..79131460
--- /dev/null
+++ b/Client/reasn-client/apps/web/app/register/user/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  ButtonBase,
+  FloatingInput,
+} from "@reasn/ui/src/components/shared/form";
+import React, { useRef, useState } from "react";
+
+const RegisterUser = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleFormSubmit = () => {
+    console.log("form submitted");
+    formRef.current?.submit();
+  };
+
+  return (
+    <>
+      <div className="flex w-1/2 items-center justify-center">
+        <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>
+      </div>
+      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center 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">
+            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">
+            gdzie powinniśmy cię szukać?
+          </p>
+        )}
+        <ButtonBase
+          text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
+          onClick={() =>
+            currentStep === 2
+              ? handleFormSubmit()
+              : setCurrentStep(currentStep + 1)
+          }
+        />
+      </div>
+      <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+    </>
+  );
+};
+
+export default RegisterUser;
diff --git a/Client/reasn-client/apps/web/styles/index.module.css b/Client/reasn-client/apps/web/styles/index.module.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/Client/reasn-client/apps/web/tsconfig.json b/Client/reasn-client/apps/web/tsconfig.json
index d2ee38a7..aea6585a 100644
--- a/Client/reasn-client/apps/web/tsconfig.json
+++ b/Client/reasn-client/apps/web/tsconfig.json
@@ -1,7 +1,12 @@
 {
   "extends": "@reasn/typescript-config/nextjs.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx b/Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx
index 991a04db..a683b29a 100644
--- a/Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx
+++ b/Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx
@@ -1,24 +1,25 @@
 import React from "react";
+import Link from "next/link";
 
 export const Navbar = () => {
   return (
     <nav className="sticky top-0 z-[50] flex h-16 w-full flex-wrap items-center justify-between rounded-b-2xl bg-black text-base text-white">
       <div className="mx-auto flex w-4/5 justify-between">
         <div>
-          <a href="#" className="text-2xl font-bold hover:text-[#ccc]">
+          <Link href="/" className="text-2xl font-bold hover:text-[#ccc]">
             Reasn.
-          </a>
+          </Link>
         </div>
         <div className="flex items-center gap-8">
-          <a href="#" className="hover:text-[#ccc]">
+          <Link href="/login" className="hover:text-[#ccc]">
             logowanie
-          </a>
-          <a
-            href="#"
+          </Link>
+          <Link
+            href="/register"
             className="rounded-2xl border-2 border-white px-6 py-1.5 hover:bg-white hover:text-black"
           >
             rejestracja
-          </a>
+          </Link>
         </div>
       </div>
     </nav>
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
new file mode 100644
index 00000000..f3a6d78d
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+interface ButtonProps {
+  text: string;
+  onClick: () => void;
+}
+
+export const ButtonBase = (props: ButtonProps) => {
+  const { text, onClick } = props;
+  return (
+    <button
+      onClick={onClick}
+      className="w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2"
+    >
+      {text}
+    </button>
+  );
+};
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
new file mode 100644
index 00000000..9e611f2b
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import React, { useState } from "react";
+
+interface InputProps {
+  type: string;
+  label?: string;
+  name?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const FloatingInput = (props: InputProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isFilled, setIsFilled] = useState(false);
+  const { label, type, name, onFocus, onBlur } = props;
+
+  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,
+      })}
+    >
+      <label
+        className={clsx(
+          "absolute left-3 transition-all duration-300",
+          { "top-[-50%] text-xs": isFocused || isFilled },
+          { "top-3 text-base": !isFocused && !isFilled },
+        )}
+      >
+        {label ?? ""}
+      </label>
+      <input
+        type={type}
+        name={name}
+        id={name}
+        className="h-full w-full rounded-lg bg-[#232327] p-2 focus:outline-none"
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={(e) => setIsFilled(!!e.target.value)}
+      />
+    </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
new file mode 100644
index 00000000..6f5bc46f
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/shared/form/index.tsx
@@ -0,0 +1,2 @@
+export { ButtonBase } from "./Button";
+export { FloatingInput } from "./Input";
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 d3562609..e45dca67 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,6 +1,7 @@
 import clsx from "clsx";
 import React, { useState } from "react";
 import { Card, CardVariant } from "@reasn/ui/src/components/shared";
+import { ButtonBase } from "@reasn/ui/src/components/shared/form";
 
 interface QuickFiltersButtonProps {
   title: string;
@@ -69,9 +70,7 @@ export const QuickFilters = () => {
         <Card variant={CardVariant.Tile} event="Abc" />
       </div>
       <div className="flex justify-center py-10">
-        <button className="w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2">
-          więcej
-        </button>
+        <ButtonBase text="więcej" onClick={() => console.log("wiecej")} />
       </div>
     </div>
   );
