commit c73aecdeaf31cef22274f7d16c78ec7d3b70ae59
Author: Dominik Poch <dpoch@email.cz>
Date:   Sat Apr 16 16:48:17 2022 +0200

    Renamed files, fixed overflow in annotation view, added access to the AnnotationContext in annotation view, deleted visiblity from add document modal window, deleted LayoutProps

diff --git a/webapp/components/annotation/AnnotationItem.tsx b/webapp/components/annotation/AnnotationItem.tsx
new file mode 100644
index 0000000..c211590
--- /dev/null
+++ b/webapp/components/annotation/AnnotationItem.tsx
@@ -0,0 +1,131 @@
+import { Col, Container, Row, Stack } from 'react-bootstrap';
+import { Occurrence, Tag } from '../types/tag';
+import { ChangeEvent, useContext, useState } from 'react';
+
+import 'antd/dist/antd.css';
+import { Button, Input } from 'antd';
+import {
+    PlusOutlined,
+    EyeOutlined,
+    DownOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons';
+import { AnnotationContext } from '../../contexts/AnnotationContext';
+
+export function AnnotationItem(props: { tag: Tag }) {
+    const [visibleProperties, setVisibleProperties] = useState(false);
+    const {
+        addOccurrence,
+        deleteOccurrence,
+        changeVisibility,
+        changePosition,
+        changeLength,
+    } = useContext(AnnotationContext);
+
+    const onAddOccurrence = () => {
+        addOccurrence(props.tag);
+    };
+
+    const onDeleteOccurrence = (occurrence: Occurrence) => (e: any) => {
+        deleteOccurrence(occurrence);
+    };
+
+    const onChangeVisibility = () => {
+        changeVisibility(props.tag);
+    };
+
+    const onChangePosition =
+        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
+            changePosition(occurrence, Number(e.currentTarget.value));
+        };
+
+    const onChangeLength =
+        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
+            changeLength(occurrence, Number(e.currentTarget.value));
+        };
+
+    const changePropertiesVisibility = () => {
+        setVisibleProperties(!visibleProperties);
+    };
+
+    return (
+        <Container>
+            <Row>
+                <Col className="d-flex align-items-center">{props.tag.name}</Col>
+                <Col sm="auto">
+                    <Button
+                        type="text"
+                        shape="circle"
+                        icon={<PlusOutlined />}
+                        onClick={onAddOccurrence}
+                    />
+                    <Button
+                        type="text"
+                        shape="circle"
+                        icon={<EyeOutlined />}
+                        onClick={onChangeVisibility}
+                    />
+                    <Button
+                        type="text"
+                        shape="circle"
+                        icon={<DownOutlined />}
+                        onClick={changePropertiesVisibility}
+                    />
+                </Col>
+            </Row>
+            {visibleProperties && (
+                <Stack>
+                    <div>Kategorie: {props.tag.category}</div>
+                    <div>Výskyty:</div>
+                    {props.tag.occurrences.map((occurrence, index) => {
+                        return (
+                            <div key={index} id={props.tag.name + index}>
+                                <Container>
+                                    <Row>
+                                        <Col>
+                                            <Row>
+                                                <Col className="d-flex align-items-center">
+                                                    Pozice:
+                                                </Col>
+                                                <Col sm="auto">
+                                                    <Input
+                                                        value={occurrence.position}
+                                                        onChange={onChangePosition(
+                                                            occurrence
+                                                        )}
+                                                    />
+                                                </Col>
+                                            </Row>
+                                            <Row>
+                                                <Col className="d-flex align-items-center">
+                                                    Délka:
+                                                </Col>
+                                                <Col sm="auto">
+                                                    <Input
+                                                        value={occurrence.length}
+                                                        onChange={onChangeLength(
+                                                            occurrence
+                                                        )}
+                                                    />
+                                                </Col>
+                                            </Row>
+                                        </Col>
+                                        <Col
+                                            sm="auto"
+                                            className="d-flex align-items-center"
+                                        >
+                                            <Button
+                                                icon={<DeleteOutlined />}
+                                                onClick={onDeleteOccurrence(occurrence)}
+                                            ></Button>
+                                        </Col>
+                                    </Row>
+                                </Container>
+                            </div>
+                        );
+                    })}
+                </Stack>
+            )}
+        </Container>
+    );
+}
diff --git a/webapp/components/annotation/AnnotationPanel.tsx b/webapp/components/annotation/AnnotationPanel.tsx
new file mode 100644
index 0000000..7aa95df
--- /dev/null
+++ b/webapp/components/annotation/AnnotationPanel.tsx
@@ -0,0 +1,44 @@
+import { Stack } from 'react-bootstrap';
+import { AnnotationItem } from './AnnotationItem';
+import { useContext } from 'react';
+import { AnnotationContext } from '../../contexts/AnnotationContext';
+import { Tag } from '../types/tag';
+
+/**
+ * Creates a panel in the annotation screen that contains a list of annotations.
+ * @returns Panel with a list of annotations.
+ */
+export function AnnotationPanel() {
+    //const { tags } = useContext(AnnotationContext);
+
+    const tags: Tag[] = [
+        {
+            name: 'tag a',
+            category: 'kategorie 1',
+            visible: true,
+            occurrences: [
+                { position: 2, length: 5 },
+                { position: 10, length: 2 },
+            ],
+        },
+        {
+            name: 'tag b',
+            category: 'kategorie 2',
+            visible: true,
+            occurrences: [
+                { position: 546, length: 432 },
+                { position: 767, length: 123 },
+            ],
+        },
+    ];
+
+    return (
+        <div>
+            <Stack>
+                {tags?.map((tag, index) => {
+                    return <AnnotationItem key={index} tag={tag} />;
+                })}
+            </Stack>
+        </div>
+    );
+}
diff --git a/webapp/components/annotation/DocumentAnnotationView.tsx b/webapp/components/annotation/DocumentAnnotationView.tsx
new file mode 100644
index 0000000..2369e46
--- /dev/null
+++ b/webapp/components/annotation/DocumentAnnotationView.tsx
@@ -0,0 +1,11 @@
+/**
+ * Creates an annotation view of a document.
+ * @returns The annotation view.
+ */
+export function DocumentAnnotationView() {
+    return (
+        <div>
+            <p>Main view with a rendered document</p>
+        </div>
+    );
+}
diff --git a/webapp/components/annotation/TagPanel.tsx b/webapp/components/annotation/TagPanel.tsx
new file mode 100644
index 0000000..aa86ccd
--- /dev/null
+++ b/webapp/components/annotation/TagPanel.tsx
@@ -0,0 +1,11 @@
+/**
+ * Creates a panel in the annotation screen that contains a list of tag.
+ * @returns Panel with a list of tags.
+ */
+export function TagPanel() {
+    return (
+        <div>
+            <p>Panel with a list of tags</p>
+        </div>
+    );
+}
diff --git a/webapp/components/annotation/annotationItem.tsx b/webapp/components/annotation/annotationItem.tsx
deleted file mode 100644
index fa3936c..0000000
--- a/webapp/components/annotation/annotationItem.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Col, Container, Row, Stack } from 'react-bootstrap';
-import { Occurrence, Tag } from '../models/tag';
-import { ChangeEvent, ChangeEventHandler, useState } from 'react';
-
-import 'antd/dist/antd.css';
-import { Button, Input } from 'antd';
-import {
-    PlusOutlined,
-    EyeOutlined,
-    DownOutlined,
-    DeleteOutlined,
-} from '@ant-design/icons';
-
-type AnnotationItemProps = {
-    tag: Tag;
-    onAddOccurrence: (tag: Tag) => void;
-    onDeleteOccurrence: (occurrence: Occurrence) => void;
-    onChangeVisibility: (tag: Tag) => void;
-    onChangePosition: (occurrence: Occurrence, newValue: number) => void;
-    onChangeLength: (occurrence: Occurrence, newValue: number) => void;
-};
-
-export function AnnotationItem(props: AnnotationItemProps) {
-    const [visibleProperties, setVisibleProperties] = useState(false);
-
-    const addOccurrence = () => {
-        props.onAddOccurrence(props.tag);
-    };
-
-    const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {
-        props.onDeleteOccurrence(occurrence);
-    };
-
-    const changeVisibility = () => {
-        props.onChangeVisibility(props.tag);
-    };
-
-    const changePropertiesVisibility = () => {
-        setVisibleProperties(!visibleProperties);
-    };
-
-    const changePosition =
-        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
-            props.onChangePosition(occurrence, Number(e.currentTarget.value));
-        };
-
-    const changeLength =
-        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
-            props.onChangeLength(occurrence, Number(e.currentTarget.value));
-        };
-
-    return (
-        <div>
-            <Row>
-                <Col className="d-flex align-items-center">{props.tag.name}</Col>
-                <Col sm="auto">
-                    <Button
-                        type="text"
-                        shape="circle"
-                        icon={<PlusOutlined />}
-                        onClick={addOccurrence}
-                    />
-                    <Button
-                        type="text"
-                        shape="circle"
-                        icon={<EyeOutlined />}
-                        onClick={changeVisibility}
-                    />
-                    <Button
-                        type="text"
-                        shape="circle"
-                        icon={<DownOutlined />}
-                        onClick={changePropertiesVisibility}
-                    />
-                </Col>
-            </Row>
-            {visibleProperties && (
-                <Stack>
-                    <div>Kategorie: {props.tag.category}</div>
-                    <div>Výskyty:</div>
-                    {props.tag.occurrences.map((occurrence, index) => {
-                        return (
-                            <div key={index} id={props.tag.name + index}>
-                                <Container>
-                                    <Row>
-                                        <Col>
-                                            <Row>
-                                                Pozice:
-                                                <Input
-                                                    value={occurrence.position}
-                                                    onChange={changePosition(occurrence)}
-                                                />
-                                            </Row>
-                                            <Row>
-                                                Délka:
-                                                <Input
-                                                    value={occurrence.length}
-                                                    onChange={changeLength(occurrence)}
-                                                />
-                                            </Row>
-                                        </Col>
-                                        <Col
-                                            sm="auto"
-                                            className="d-flex align-items-center"
-                                        >
-                                            <Button
-                                                icon={<DeleteOutlined />}
-                                                onClick={deleteOccurrence(occurrence)}
-                                            ></Button>
-                                        </Col>
-                                    </Row>
-                                </Container>
-                            </div>
-                        );
-                    })}
-                </Stack>
-            )}
-        </div>
-    );
-}
diff --git a/webapp/components/annotation/annotationPanel.tsx b/webapp/components/annotation/annotationPanel.tsx
deleted file mode 100644
index 155a344..0000000
--- a/webapp/components/annotation/annotationPanel.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Stack } from 'react-bootstrap';
-import { AnnotationItem } from './annotationItem';
-import { Occurrence, Tag } from '../models/tag';
-import { useContext } from 'react';
-import { AnnotationContext } from '../../contexts/AnnotationContext';
-
-type AnnotationPanelProps = {
-    tags: Tag[];
-    onAddOccurrence: (tag: Tag) => void;
-    onDeleteOccurrence: (occurrence: Occurrence) => void;
-    onChangeVisibility: (tag: Tag) => void;
-    onChangePosition: (occurrence: Occurrence, newValue: number) => void;
-    onChangeLength: (occurrence: Occurrence, newValue: number) => void;
-};
-
-/**
- * Creates a panel in the annotation screen that contains a list of annotations.
- * @returns Panel with a list of annotations.
- */
-export function AnnotationPanel(props: AnnotationPanelProps) {
-    const { tags } = useContext(AnnotationContext);
-
-    return (
-        <div>
-            <p>Panel with a list of annotations</p>
-            <Stack>
-                {props.tags.map((tag, index) => {
-                    return (
-                        <AnnotationItem
-                            key={index}
-                            tag={tag}
-                            onAddOccurrence={props.onAddOccurrence}
-                            onDeleteOccurrence={props.onDeleteOccurrence}
-                            onChangeVisibility={props.onChangeVisibility}
-                            onChangePosition={props.onChangePosition}
-                            onChangeLength={props.onChangeLength}
-                        />
-                    );
-                })}
-            </Stack>
-        </div>
-    );
-}
diff --git a/webapp/components/annotation/documentAnnotationView.tsx b/webapp/components/annotation/documentAnnotationView.tsx
deleted file mode 100644
index 2369e46..0000000
--- a/webapp/components/annotation/documentAnnotationView.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Creates an annotation view of a document.
- * @returns The annotation view.
- */
-export function DocumentAnnotationView() {
-    return (
-        <div>
-            <p>Main view with a rendered document</p>
-        </div>
-    );
-}
diff --git a/webapp/components/annotation/tagPanel.tsx b/webapp/components/annotation/tagPanel.tsx
deleted file mode 100644
index aa86ccd..0000000
--- a/webapp/components/annotation/tagPanel.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Creates a panel in the annotation screen that contains a list of tag.
- * @returns Panel with a list of tags.
- */
-export function TagPanel() {
-    return (
-        <div>
-            <p>Panel with a list of tags</p>
-        </div>
-    );
-}
diff --git a/webapp/components/modals/AddDocument.tsx b/webapp/components/modals/AddDocument.tsx
new file mode 100644
index 0000000..eb7ab81
--- /dev/null
+++ b/webapp/components/modals/AddDocument.tsx
@@ -0,0 +1,84 @@
+import { message, Button, Modal, Upload } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import 'antd/dist/antd.css';
+
+const { Dragger } = Upload;
+
+/**
+ * Creates a modal window that loads documents to the app.
+ * @returns The modal window.
+ */
+export function AddDocument(afterClose: () => {}) {
+    /**
+     * Settings of a file loader.
+     */
+    const props = {
+        name: 'file',
+        multiple: true,
+        directory: true,
+        /**
+            @todo: Probably will be needed to change the uploading URL
+        **/
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+        onChange(info: any) {
+            const { status } = info.file;
+
+            if (status !== 'uploading') {
+                console.log(info.file, info.fileList);
+            }
+
+            if (status === 'done') {
+                message.success(`${info.file.name} file uploaded successfully.`);
+            } else if (status === 'error') {
+                message.error(`${info.file.name} file upload failed.`);
+            }
+        },
+        onDrop(e: any) {
+            console.log('Dropped files', e.dataTransfer.files);
+        },
+    };
+
+    /**
+     * Handles successfull closing of the modal window.
+     */
+    const handleOk = () => {
+        /**
+            @todo: Send documents to a server when all files are loaded
+        **/
+        console.log('Document is loaded');
+        afterClose();
+    };
+
+    /**
+     * Handles cancelling of the model window.
+     */
+    const handleCancel = () => {
+        console.log('Loading of documents is cancelled.');
+        afterClose();
+    };
+
+    return (
+        <Modal
+            title="Nový dokument"
+            onOk={handleOk}
+            onCancel={handleCancel}
+            footer={[
+                <Button key="back" onClick={handleCancel}>
+                    Storno
+                </Button>,
+                <Button key="submit" type="primary" onClick={handleOk}>
+                    Nahrát
+                </Button>,
+            ]}
+        >
+            <Dragger>
+                <p className="ant-upload-drag-icon">
+                    <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">
+                    Soubory lze nahrát stisknutím nebo přetažením...
+                </p>
+            </Dragger>
+        </Modal>
+    );
+}
diff --git a/webapp/components/modals/addDocument.tsx b/webapp/components/modals/addDocument.tsx
deleted file mode 100644
index f01fefd..0000000
--- a/webapp/components/modals/addDocument.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { message, Button, Modal, Upload } from 'antd';
-import { useState } from 'react';
-import { InboxOutlined } from '@ant-design/icons';
-import 'antd/dist/antd.css';
-
-const { Dragger } = Upload;
-
-/**
- * Creates a modal window that loads documents to the app.
- * @returns The modal window.
- */
-export function AddDocument() {
-    const [visible, setVisible] = useState(true);
-
-    /**
-     * Settings of a file loader.
-     */
-    const props = {
-        name: 'file',
-        multiple: true,
-        directory: true,
-        /**
-            @todo: Probably will be needed to change the uploading URL
-        **/
-        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-        onChange(info: any) {
-            const { status } = info.file;
-
-            if (status !== 'uploading') {
-                console.log(info.file, info.fileList);
-            }
-
-            if (status === 'done') {
-                message.success(`${info.file.name} file uploaded successfully.`);
-            } else if (status === 'error') {
-                message.error(`${info.file.name} file upload failed.`);
-            }
-        },
-        onDrop(e: any) {
-            console.log('Dropped files', e.dataTransfer.files);
-        },
-    };
-
-    /**
-     * Handles successfull closing of the modal window.
-     */
-    const handleOk = () => {
-        setVisible(false);
-        /**
-            @todo: Send documents to a server when all files are loaded
-        **/
-        console.log('Document is loaded');
-    };
-
-    /**
-     * Handles cancelling of the model window.
-     */
-    const handleCancel = () => {
-        setVisible(false);
-        console.log('Loading of documents is cancelled.');
-    };
-
-    return (
-        <Modal
-            visible={visible}
-            title="Nový dokument"
-            onOk={handleOk}
-            onCancel={handleCancel}
-            footer={[
-                <Button key="back" onClick={handleCancel}>
-                    Storno
-                </Button>,
-                <Button key="submit" type="primary" onClick={handleOk}>
-                    Nahrát
-                </Button>,
-            ]}
-        >
-            <Dragger>
-                <p className="ant-upload-drag-icon">
-                    <InboxOutlined />
-                </p>
-                <p className="ant-upload-text">
-                    Soubory lze nahrát stisknutím nebo přetažením...
-                </p>
-            </Dragger>
-        </Modal>
-    );
-}
diff --git a/webapp/components/models/tag.tsx b/webapp/components/models/tag.tsx
deleted file mode 100644
index a343b9f..0000000
--- a/webapp/components/models/tag.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Tag = {
-    name: string;
-    category: string;
-    visible: boolean;
-    occurrences: Occurrence[];
-};
-
-export type Occurrence = {
-    position: number;
-    length: number;
-};
diff --git a/webapp/components/navigation/AdminNavBar.tsx b/webapp/components/navigation/AdminNavBar.tsx
new file mode 100644
index 0000000..f9036cc
--- /dev/null
+++ b/webapp/components/navigation/AdminNavBar.tsx
@@ -0,0 +1,11 @@
+/**
+ * Creates a navigation bar of an admin.
+ * @returns Navigation bar of an admin.
+ */
+export function AdminNavBar() {
+    return (
+        <div>
+            <p>Navigation bar of an admin.</p>
+        </div>
+    );
+}
diff --git a/webapp/components/navigation/UserNavBar.tsx b/webapp/components/navigation/UserNavBar.tsx
new file mode 100644
index 0000000..e59e350
--- /dev/null
+++ b/webapp/components/navigation/UserNavBar.tsx
@@ -0,0 +1,11 @@
+/**
+ * Creates a navigation bar of a normal user (annotator).
+ * @returns Navigation bar of a user.
+ */
+export function UserNavBar() {
+    return (
+        <div>
+            <p>Navigation bar of a normal user.</p>
+        </div>
+    );
+}
diff --git a/webapp/components/navigation/adminNavBar.tsx b/webapp/components/navigation/adminNavBar.tsx
deleted file mode 100644
index f9036cc..0000000
--- a/webapp/components/navigation/adminNavBar.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Creates a navigation bar of an admin.
- * @returns Navigation bar of an admin.
- */
-export function AdminNavBar() {
-    return (
-        <div>
-            <p>Navigation bar of an admin.</p>
-        </div>
-    );
-}
diff --git a/webapp/components/navigation/userNavBar.tsx b/webapp/components/navigation/userNavBar.tsx
deleted file mode 100644
index e59e350..0000000
--- a/webapp/components/navigation/userNavBar.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Creates a navigation bar of a normal user (annotator).
- * @returns Navigation bar of a user.
- */
-export function UserNavBar() {
-    return (
-        <div>
-            <p>Navigation bar of a normal user.</p>
-        </div>
-    );
-}
diff --git a/webapp/components/types/layoutProps.tsx b/webapp/components/types/layoutProps.tsx
deleted file mode 100644
index 1e9b0ba..0000000
--- a/webapp/components/types/layoutProps.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-/**
- * Props prepared for a react stucture that is passed to a layout.
- */
-export type LayoutProps = {
-    children: React.ReactNode;
-};
diff --git a/webapp/components/types/tag.tsx b/webapp/components/types/tag.tsx
new file mode 100644
index 0000000..a343b9f
--- /dev/null
+++ b/webapp/components/types/tag.tsx
@@ -0,0 +1,11 @@
+export type Tag = {
+    name: string;
+    category: string;
+    visible: boolean;
+    occurrences: Occurrence[];
+};
+
+export type Occurrence = {
+    position: number;
+    length: number;
+};
diff --git a/webapp/contexts/AnnotationContext.tsx b/webapp/contexts/AnnotationContext.tsx
index f1be052..e7f49a6 100644
--- a/webapp/contexts/AnnotationContext.tsx
+++ b/webapp/contexts/AnnotationContext.tsx
@@ -1,11 +1,11 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { TagInstanceInfo } from '../api';
-import { Occurrence, Tag } from '../components/models/tag';
+import { Occurrence, Tag } from '../components/types/tag';
 
 interface IAnnotationContextProvider {
     tags: TagInstanceInfo[] | null;
     setTags: (newTags: TagInstanceInfo[] | null) => void;
-    addOccurrence: () => void;
+    addOccurrence: (tag: Tag) => void;
     changeVisibility: (tag: Tag) => void;
     deleteOccurrence: (occurrence: Occurrence) => void;
     changePosition: (occurrence: Occurrence, newValue: number) => void;
@@ -17,7 +17,7 @@ export const AnnotationContext = createContext<IAnnotationContextProvider>({
     setTags: (v) => {
         return;
     },
-    addOccurrence: () => {
+    addOccurrence: (tag: Tag) => {
         return;
     },
     changeVisibility: (tag: Tag) => {
@@ -36,7 +36,7 @@ export const AnnotationContext = createContext<IAnnotationContextProvider>({
 
 const AnnotationProvider = (props: { children: React.ReactNode }) => {
     const [tags, setTags] = useState<TagInstanceInfo[] | null>(null);
-    const addOccurrence = () => {};
+    const addOccurrence = (tag: Tag) => {};
     const changeVisibility = (tag: Tag) => {};
     const deleteOccurrence = (occurrence: Occurrence) => {};
     const changePosition = (occurrence: Occurrence, newValue: number) => {};
diff --git a/webapp/layouts/LoginLayout.tsx b/webapp/layouts/LoginLayout.tsx
new file mode 100644
index 0000000..05a1244
--- /dev/null
+++ b/webapp/layouts/LoginLayout.tsx
@@ -0,0 +1,37 @@
+import logo from '/public/usp-logo.svg';
+import Image from 'next/image';
+import styles from '/styles/Login.module.scss';
+import { Col, Container, Row, Stack } from 'react-bootstrap';
+import React from 'react';
+
+/**
+ * Creates layout of a login screen.
+ * @param props Html structure of a login form.
+ * @returns The login screen.
+ */
+export function LoginLayout(props: { children: React.ReactNode }) {
+    return (
+        <Container>
+            <Row className="min-vh-100 align-items-center">
+                <Col md={8}>
+                    <Stack gap={5}>
+                        <div>
+                            <Image
+                                src={logo}
+                                alt="Ústav státu a práva Akademie věd ČR"
+                            ></Image>
+                        </div>
+                        <h1 className={styles.title}>
+                            Vítejte na stránkách Ústavu státu a práva Akademie věd ČR pro
+                            anotaci dokumentů v rámci projektu TAČR TL03000152 - Umělá
+                            inteligence, média a právo
+                        </h1>
+                    </Stack>
+                </Col>
+                <Col md={4}>
+                    <main>{props.children}</main>
+                </Col>
+            </Row>
+        </Container>
+    );
+}
diff --git a/webapp/layouts/MainLayout.tsx b/webapp/layouts/MainLayout.tsx
new file mode 100644
index 0000000..ae5d48b
--- /dev/null
+++ b/webapp/layouts/MainLayout.tsx
@@ -0,0 +1,26 @@
+import { UserNavBar } from '../components/navigation/UserNavBar';
+import { AdminNavBar } from '../components/navigation/AdminNavBar';
+import 'antd/dist/antd.css';
+import styles from '/styles/MainLayout.module.scss';
+import React from 'react';
+
+/**
+ * Creates layout of main screens.
+ * @param props Html structure of a login form.
+ * @returns The login screen.
+ */
+export function MainLayout(props: { children: React.ReactNode }) {
+    return (
+        <div className={styles.layoutWrapper}>
+            <div className={styles.header}>
+                {/**
+                 @todo: Select correct navigation bar
+                 {user && <UserNavBar />}
+                 {admin && <AdminNavBar />}
+                **/}
+            </div>
+            <main className={styles.content}>{props.children}</main>
+            <div className={styles.footer}></div>
+        </div>
+    );
+}
diff --git a/webapp/layouts/loginLayout.tsx b/webapp/layouts/loginLayout.tsx
deleted file mode 100644
index 1ea729c..0000000
--- a/webapp/layouts/loginLayout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import logo from '/public/usp-logo.svg';
-import Image from 'next/image';
-import styles from '/styles/login.module.scss';
-import { Col, Container, Row, Stack } from 'react-bootstrap';
-import { LayoutProps } from '../components/types/layoutProps';
-
-/**
- * Creates layout of a login screen.
- * @param props Html structure of a login form.
- * @returns The login screen.
- */
-export function LoginLayout(props: LayoutProps) {
-    return (
-        <Container>
-            <Row className="min-vh-100 align-items-center">
-                <Col md={8}>
-                    <Stack gap={5}>
-                        <div>
-                            <Image
-                                src={logo}
-                                alt="Ústav státu a práva Akademie věd ČR"
-                            ></Image>
-                        </div>
-                        <h1 className={styles.title}>
-                            Vítejte na stránkách Ústavu státu a práva Akademie věd ČR pro
-                            anotaci dokumentů v rámci projektu TAČR TL03000152 - Umělá
-                            inteligence, média a právo
-                        </h1>
-                    </Stack>
-                </Col>
-                <Col md={4}>
-                    <main>{props.children}</main>
-                </Col>
-            </Row>
-        </Container>
-    );
-}
diff --git a/webapp/layouts/mainLayout.tsx b/webapp/layouts/mainLayout.tsx
deleted file mode 100644
index 53e5b36..0000000
--- a/webapp/layouts/mainLayout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { LayoutProps } from '../components/types/layoutProps';
-import { UserNavBar } from '../components/navigation/userNavBar';
-import { AdminNavBar } from '../components/navigation/adminNavBar';
-import 'antd/dist/antd.css';
-import styles from '/styles/mainLayout.module.scss';
-
-/**
- * Creates layout of main screens.
- * @param props Html structure of a login form.
- * @returns The login screen.
- */
-export function MainLayout(props: LayoutProps) {
-    return (
-        <div className={styles.layoutwrapper}>
-            <div className={styles.header}>
-                {/**
-                 @todo: Select correct navigation bar
-                 {user && <UserNavBar />}
-                 {admin && <AdminNavBar />}
-                **/}
-            </div>
-            <main className={styles.content}>{props.children}</main>
-            <div className={styles.footer}></div>
-        </div>
-    );
-}
diff --git a/webapp/pages/annotation/index.tsx b/webapp/pages/annotation/index.tsx
index e5277f5..ff51bb3 100644
--- a/webapp/pages/annotation/index.tsx
+++ b/webapp/pages/annotation/index.tsx
@@ -1,52 +1,20 @@
-import { AnnotationPanel } from '../../components/annotation/annotationPanel';
-import { DocumentAnnotationView } from '../../components/annotation/documentAnnotationView';
-import { TagPanel } from '../../components/annotation/tagPanel';
-import { MainLayout } from '../../layouts/mainLayout';
+import { AnnotationPanel } from '../../components/annotation/AnnotationPanel';
+import { DocumentAnnotationView } from '../../components/annotation/DocumentAnnotationView';
+import { TagPanel } from '../../components/annotation/TagPanel';
+import { MainLayout } from '../../layouts/MainLayout';
 import 'antd/dist/antd.css';
-import styles from '/styles/annotation.module.scss';
-import { Occurrence, Tag } from '../../components/models/tag';
-import AnnotationProvider from '../../contexts/AnnotationContext';
+import styles from '/styles/Annotation.module.scss';
+import AnnotationProvider, { AnnotationContext } from '../../contexts/AnnotationContext';
 
 /**
  * Creates an annotation screen.
  * @returns The annotation screen.
  */
 function Annotation() {
-    const tags = [
-        {
-            name: 'tag a',
-            category: 'kategorie 1',
-            visible: true,
-            occurrences: [
-                { position: 2, length: 5 },
-                { position: 10, length: 2 },
-            ],
-        },
-        {
-            name: 'tag b',
-            category: 'kategorie 2',
-            visible: true,
-            occurrences: [
-                { position: 546, length: 432 },
-                { position: 767, length: 123 },
-            ],
-        },
-    ];
-
-    const addOccurrence = () => {};
-
-    const changeVisibility = (tag: Tag) => {};
-
-    const deleteOccurrence = (occurrence: Occurrence) => {};
-
-    const changePosition = (occurrence: Occurrence, newValue: number) => {};
-
-    const changeLength = (occurrence: Occurrence, newValue: number) => {};
-
     return (
         <AnnotationProvider>
             <MainLayout>
-                <div className={styles.layoutwrapper}>
+                <div className={styles.layoutWrapper}>
                     <div className={styles.tags}>
                         <TagPanel />
                     </div>
@@ -54,14 +22,7 @@ function Annotation() {
                         <DocumentAnnotationView />
                     </div>
                     <div className={styles.annotations}>
-                        <AnnotationPanel
-                            tags={tags}
-                            onAddOccurrence={addOccurrence}
-                            onChangeVisibility={changeVisibility}
-                            onDeleteOccurrence={deleteOccurrence}
-                            onChangePosition={changePosition}
-                            onChangeLength={changeLength}
-                        />
+                        <AnnotationPanel />
                     </div>
                 </div>
             </MainLayout>
diff --git a/webapp/pages/login/index.tsx b/webapp/pages/login/index.tsx
index ec6a70d..4beeb7b 100644
--- a/webapp/pages/login/index.tsx
+++ b/webapp/pages/login/index.tsx
@@ -1,7 +1,7 @@
 import { Form, Input, Button } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import 'antd/dist/antd.css';
-import { LoginLayout } from '../../layouts/loginLayout';
+import { LoginLayout } from '../../layouts/LoginLayout';
 
 /**
  * Creates a login screen.
diff --git a/webapp/styles/Annotation.module.scss b/webapp/styles/Annotation.module.scss
new file mode 100644
index 0000000..aff389a
--- /dev/null
+++ b/webapp/styles/Annotation.module.scss
@@ -0,0 +1,36 @@
+.layoutWrapper {
+    display: grid;
+
+    grid:
+        [main-start] 'tags document annotations' [main-end]
+        / 1fr 3fr 1fr;
+
+    width:100%;
+    height:100%;
+    place-items: stretch;
+    place-content: stretch;
+    gap: 3px;
+}
+
+%annotationContent {
+    background-color: white;
+    padding: 10px 0px 10px 10px;
+    overflow-y: scroll;
+}
+
+.tags {
+    @extend %annotationContent;
+    grid-area: tags;
+}
+
+.annotations {
+    @extend %annotationContent;
+    grid-area: annotations;
+
+
+}
+
+.document {
+    @extend %annotationContent;
+    grid-area: document;
+}
\ No newline at end of file
diff --git a/webapp/styles/Login.module.scss b/webapp/styles/Login.module.scss
new file mode 100644
index 0000000..ca13ba7
--- /dev/null
+++ b/webapp/styles/Login.module.scss
@@ -0,0 +1,4 @@
+.title {
+    font-size: x-large;
+    font-family:Arial, Helvetica, sans-serif
+}
\ No newline at end of file
diff --git a/webapp/styles/MainLayout.module.scss b/webapp/styles/MainLayout.module.scss
new file mode 100644
index 0000000..c80e35c
--- /dev/null
+++ b/webapp/styles/MainLayout.module.scss
@@ -0,0 +1,31 @@
+.layoutWrapper {
+    background-color: lightgray;
+    display: grid;
+
+    grid:
+        [header-start] 'header' 60px [header-end]
+        [main-start] 'content' [main-end]
+        [footer-start] 'footer' 30px [footer-end];
+
+    place-items: stretch;
+    place-content: stretch;
+
+    width: 100vw;
+    height: 100vh;
+
+    gap: 3px;
+}
+
+.header {
+    grid-area: header;
+
+}
+
+.content {
+    grid-area: content;
+    overflow-y: hidden;
+}
+
+.footer {
+    grid-area: footer;
+}
diff --git a/webapp/styles/annotation.module.scss b/webapp/styles/annotation.module.scss
deleted file mode 100644
index 09e6605..0000000
--- a/webapp/styles/annotation.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-%lightBackground {
-    background-color: white;
-}
-
-.layoutwrapper {
-    display: grid;
-
-    grid:
-        [main-start] 'tags document annotations' [main-end]
-        / 1fr 3fr 1fr;
-
-    width:100%;
-    height:100%;
-    place-items: stretch;
-    place-content: stretch;
-    gap: 3px;
-}
-
-
-.tags {
-    @extend %lightBackground;
-    grid-area: tags;
-}
-
-.annotations {
-    @extend %lightBackground;
-    grid-area: annotations;
-}
-
-.document {
-    @extend %lightBackground;
-    grid-area: document;
-}
\ No newline at end of file
diff --git a/webapp/styles/login.module.scss b/webapp/styles/login.module.scss
deleted file mode 100644
index ca13ba7..0000000
--- a/webapp/styles/login.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.title {
-    font-size: x-large;
-    font-family:Arial, Helvetica, sans-serif
-}
\ No newline at end of file
diff --git a/webapp/styles/mainLayout.module.scss b/webapp/styles/mainLayout.module.scss
deleted file mode 100644
index a68a9a3..0000000
--- a/webapp/styles/mainLayout.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.layoutwrapper {
-    background-color: lightgray;
-    display: grid;
-
-    grid:
-        [header-start] 'header' 60px [header-end]
-        [main-start] 'content' [main-end]
-        [footer-start] 'footer' 30px [footer-end];
-
-    place-items: stretch;
-    place-content: stretch;
-
-    width: 100vw;
-    height: 100vh;
-
-    gap: 3px;
-}
-
-.header {
-    grid-area: header;
-}
-
-.content {
-    grid-area: content;
-}
-
-.footer {
-    grid-area: footer;
-}
