diff --git a/website/src/app/osobni-udaje/page.tsx b/website/src/app/osobni-udaje/page.tsx
new file mode 100644
index 0000000..989978e
--- /dev/null
+++ b/website/src/app/osobni-udaje/page.tsx
@@ -0,0 +1,32 @@
+import MainLayout from 'components/MainLayout';
+import Panel from 'components/Panel';
+
+const GdprPage = (): JSX.Element => {
+  return (
+    <MainLayout>
+      <div className="container">
+        <Panel title="Správa osobních údajů" wide transparent>
+          <p>
+            Vaše osobní údaje jsou shromažďovány a zpracovávány organizcí Kódím.cz v souladu se směrnicí GDPR a to pouze k účelům uvedeným níže. Zpracováváme pouze osobní údaje, které nám sdělíte v souvislosti s registrací a účastí na našich kurzech a jiných akcích
+          </p>
+          
+          <h2>Jaké údaje zpracováváme</h2>
+        
+          <ul>
+            <li>Jméno a příjmení: za účelem identifikace uživatele</li>
+            <li>E-mail: za účelem identifikace uživatele a informování o nových kurzech a akcích</li>
+            <li>Adresa bydliště: pouze za účelem vystavení faktury za účast na kurzu či jiné akci</li>
+          </ul>
+
+          <h2>Přístup k údajům</h2>
+          <p>Kódím.cz zajišťuje bezpečnost a důvěrnost vašich údajů. Žádné ze zpracovávaných údajů nebudou zveřejněny nikde na webu Kódím.cz ani nebudou poskytovány třetím stranám.</p>
+
+          <h2>Délka zpracování</h2>
+          <p>Vaše osobní údaje zpracováváme po dobu trvání vašeho souhlasu vyjádřeného při registraci na webové stránky nebo při prihlášení na kurz nebo jinou akci. Svůj souhlas můžete kdykoliv odvolat odesláním požadavku na e-mail <a href="mailto:sprava@kodim.cz">sprava@kodim.cz</a>.</p>
+        </Panel>
+      </div>
+    </MainLayout>
+  );
+};
+
+export default GdprPage;
diff --git a/website/src/app/registrace/page.tsx b/website/src/app/registrace/page.tsx
new file mode 100644
index 0000000..77e7376
--- /dev/null
+++ b/website/src/app/registrace/page.tsx
@@ -0,0 +1,55 @@
+import { redirect } from 'next/navigation';
+import { session } from 'app/session';
+import MainLayout from 'components/MainLayout';
+import Panel from 'components/Panel';
+import Icon from 'components/Icon';
+import css from './styles.module.scss';
+
+export const dynamic = 'force-dynamic';
+
+const RegisterPage = async (): Promise<JSX.Element> => {
+  const { user } = await session();
+
+  if (user !== null) {
+    redirect('/');
+  }
+
+  return (
+    <MainLayout>
+      <div className="container">
+        <Panel title="Registrace" transparent>
+          <p>
+            Žádný z těchto údajů nebude zobrazen nikde na webu ani nebude sdílen s třetími stranami.
+          </p>
+          <form>
+            <div className={css.fields}>
+              <label htmlFor="name">Celé jméno:</label>
+              <input type="text" id="name" />
+              <label htmlFor="email">Email:</label>
+              <input type="email" id="email" />
+            </div>
+            <div className={css.checkfield}>
+              <input type="checkbox" id="gdpr" />
+              <label htmlFor="gdpr">
+                Souhlasím se <a href="osobni-udaje">zpracováním osobních údajů</a>
+              </label>
+            </div>
+            <div className={css.checkfield}>
+              <input type="checkbox" id="newsletter" />
+              <label htmlFor="newsletter">
+                Nepřeji si dostávat e-maily s novinkami ohledně nových kurzů a akcí na Kódím.cz
+              </label>
+            </div>
+            <div className={css.controls}>
+              <button type="submit" className="btn">
+                Registrovat
+              </button>
+            </div>
+          </form>
+        </Panel>
+      </div>
+    </MainLayout>
+  );
+};
+
+export default RegisterPage;
diff --git a/website/src/app/registrace/styles.module.scss b/website/src/app/registrace/styles.module.scss
new file mode 100644
index 0000000..c28759d
--- /dev/null
+++ b/website/src/app/registrace/styles.module.scss
@@ -0,0 +1,34 @@
+@import "styles/variables.scss";
+@import "styles/mixins.scss";
+
+.providers {
+  margin-bottom: 1rem;
+}
+
+.providerLink {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.25rem;
+  align-items: baseline;
+  margin-bottom: 1rem;
+
+  @include breakpoint-md {
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+  }
+}
+
+.checkfield {
+  margin-bottom: 1rem;
+}
+
+.controls {
+  text-align: right;
+}
diff --git a/website/src/components/Panel/index.tsx b/website/src/components/Panel/index.tsx
index e44a9ec..013bf3b 100644
--- a/website/src/components/Panel/index.tsx
+++ b/website/src/components/Panel/index.tsx
@@ -1,17 +1,20 @@
+import clsx from 'clsx';
 import styles from './styles.module.scss';
 
 interface Props {
   title: string;
+  wide?: boolean;
+  transparent?: boolean;
   children: React.ReactNode;
 }
 
-const Panel = ({ title, children }: Props) => {
+const Panel = ({ title, wide = false, transparent = false, children }: Props) => {
   return (
-    <div className={styles.panel}>
+    <div className={clsx(styles.panel, wide && styles.wide)}>
       <div className={styles.panelHead}>
         {title}
       </div>
-      <div className={styles.panelBody}>
+      <div className={clsx(styles.panelBody, transparent && styles.transparent)}>
         {children}
       </div>
     </div>
diff --git a/website/src/components/Panel/styles.module.scss b/website/src/components/Panel/styles.module.scss
index e1303ad..6d33b6b 100644
--- a/website/src/components/Panel/styles.module.scss
+++ b/website/src/components/Panel/styles.module.scss
@@ -20,3 +20,12 @@
     border-radius: 0.5rem;
   }
 }
+
+.wide {
+  max-width: 40rem;
+}
+
+.transparent {
+  background-color: transparent;
+  padding-top: 0;
+}
diff --git a/website/src/styles/global.scss b/website/src/styles/global.scss
index 0763722..e3a3fda 100644
--- a/website/src/styles/global.scss
+++ b/website/src/styles/global.scss
@@ -40,3 +40,42 @@ body {
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.25;
 }
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="url"],
+textarea {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid $palette-1;
+  background-color: white;
+  color: $color-text;
+  transition: border-color 0.2s ease-in-out;
+}
+
+input[type="checkbox"] {
+  transform: scale(1.5);
+  margin-right: 0.5rem;
+}
+
+
+.btn {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0.5rem 1rem;
+  border: none;
+  outline: none;
+  border-radius: 0.25rem;
+  background-color: $palette-1;
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}