diff --git a/.web/pages/404.js b/.web/pages/404.js
index f76066b..54fd223 100644
--- a/.web/pages/404.js
+++ b/.web/pages/404.js
@@ -5,8 +5,8 @@ import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from
 import "focus-visible/dist/focus-visible"
 import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
-import { useClientSideRouting } from "/utils/client_side_routing"
 import Error from "next/error"
+import { useClientSideRouting } from "/utils/client_side_routing"
 import NextHead from "next/head"
 
 
diff --git a/.web/pages/dashboard.js b/.web/pages/dashboard.js
index b4f8ba9..be614ea 100644
--- a/.web/pages/dashboard.js
+++ b/.web/pages/dashboard.js
@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
 import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
 import "focus-visible/dist/focus-visible"
-import { Box, Code, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
 import NextLink from "next/link"
 import { HamburgerIcon } from "@chakra-ui/icons"
@@ -66,28 +66,28 @@ export default function Component() {
 </Fragment>
   <HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
   <Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
-  <VStack sx={{"height": "100dvh"}}>
+  <VStack sx={{"height": "100%"}}>
   <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
   <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
   <Spacer/>
 </HStack>
   <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Strona główna`}
 </Text>
 </HStack>
 </Link>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Dashboard`}
 </Text>
 </HStack>
 </Link>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Settings`}
 </Text>
@@ -101,16 +101,10 @@ export default function Component() {
   <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
   <VStack>
   <Heading sx={{"fontSize": "3em"}}>
-  {`Dashboard`}
+  {`BlurMe`}
 </Heading>
   <Text>
-  {`Welcome to Reflex!`}
-</Text>
-  <Text>
-  {`You can edit this page in `}
-  <Code>
-  {`{your_app}/pages/dashboard.py`}
-</Code>
+  {`Dodaj zdjęcia, które chcesz zanonimizować!`}
 </Text>
 </VStack>
 </Box>
@@ -121,28 +115,28 @@ export default function Component() {
   <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
   <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
   {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
   {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
   {`Settings`}
 </Link>
 </MenuItem>
   <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
   {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
   {`Contact`}
 </Link>
diff --git a/.web/pages/index.js b/.web/pages/index.js
index 1d7a230..1bb1717 100644
--- a/.web/pages/index.js
+++ b/.web/pages/index.js
@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
 import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
 import "focus-visible/dist/focus-visible"
-import { Box, Heading, HStack, Image, Link, List, ListItem, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, OrderedList, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Button, Heading, HStack, Image, Link, List, ListItem, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, OrderedList, Spacer, Text, VStack, Wrap, WrapItem } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
 import NextLink from "next/link"
 import { HamburgerIcon } from "@chakra-ui/icons"
@@ -66,28 +66,28 @@ export default function Component() {
 </Fragment>
   <HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
   <Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
-  <VStack sx={{"height": "100dvh"}}>
+  <VStack sx={{"height": "100%"}}>
   <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
   <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
   <Spacer/>
 </HStack>
   <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Strona główna`}
 </Text>
 </HStack>
 </Link>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Dashboard`}
 </Text>
 </HStack>
 </Link>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Settings`}
 </Text>
@@ -103,6 +103,23 @@ export default function Component() {
   <Heading sx={{"fontSize": "3em", "marginBottom": "25px", "backgroundImage": "linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", "backgroundClip": "text", "padding": "10px"}}>
   {`Witaj w BlurMe!`}
 </Heading>
+  <Wrap>
+  <WrapItem sx={{"flex-direction": "column", "w": "45%"}}>
+  <Text sx={{"fontSize": "1.2em"}}>
+  {`Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!`}
+</Text>
+</WrapItem>
+  <WrapItem>
+  <Text>
+  {`Tu będzie obrazek`}
+</Text>
+</WrapItem>
+</Wrap>
+  <Link as={NextLink} href={`settings`} sx={{"color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
+  <Button>
+  {`Zacznij anonimizować`}
+</Button>
+</Link>
   <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "10px", "marginBottom": "10px"}}>
   {`Dlaczego Blurme?`}
 </Text>
@@ -115,7 +132,7 @@ export default function Component() {
 </ListItem>
   <ListItem>
   <Text as={`b`}>
-  {`Prost obsługa: `}
+  {`Prosta obsługa: `}
 </Text>
   {`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`}
 </ListItem>
@@ -190,28 +207,28 @@ export default function Component() {
   <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
   <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
   {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
   {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
   {`Settings`}
 </Link>
 </MenuItem>
   <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
   {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
   {`Contact`}
 </Link>
diff --git a/.web/pages/settings.js b/.web/pages/settings.js
index 2f513cd..509e862 100644
--- a/.web/pages/settings.js
+++ b/.web/pages/settings.js
@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
 import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
 import "focus-visible/dist/focus-visible"
-import { Box, Code, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
 import NextLink from "next/link"
 import { HamburgerIcon } from "@chakra-ui/icons"
@@ -66,28 +66,28 @@ export default function Component() {
 </Fragment>
   <HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
   <Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
-  <VStack sx={{"height": "100dvh"}}>
+  <VStack sx={{"height": "100%"}}>
   <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
   <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
   <Spacer/>
 </HStack>
   <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Strona główna`}
 </Text>
 </HStack>
 </Link>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Dashboard`}
 </Text>
 </HStack>
 </Link>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
   <Text>
   {`Settings`}
 </Text>
@@ -101,16 +101,10 @@ export default function Component() {
   <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
   <VStack>
   <Heading sx={{"fontSize": "3em"}}>
-  {`Settings`}
+  {`BlurMe`}
 </Heading>
   <Text>
-  {`Welcome to Reflex!`}
-</Text>
-  <Text>
-  {`You can edit this page in `}
-  <Code>
-  {`{your_app}/pages/settings.py`}
-</Code>
+  {`Dodaj zdjęcia, które chcesz zanonimizować!`}
 </Text>
 </VStack>
 </Box>
@@ -121,28 +115,28 @@ export default function Component() {
   <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
   <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
   {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
   {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
   {`Settings`}
 </Link>
 </MenuItem>
   <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
   {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
   <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
   {`Contact`}
 </Link>
diff --git a/blurme/components/sidebar.py b/blurme/components/sidebar.py
index 565a2d6..7f7facc 100644
--- a/blurme/components/sidebar.py
+++ b/blurme/components/sidebar.py
@@ -7,11 +7,6 @@ import reflex as rx
 
 
 def sidebar_header() -> rx.Component:
-    """Sidebar header.
-
-    Returns:
-        The sidebar header component.
-    """
     return rx.hstack(
         # The logo.
         rx.image(
@@ -19,7 +14,6 @@ def sidebar_header() -> rx.Component:
             height="4.5em",
         ),
         rx.spacer(),
-        # Link to Reflex GitHub repo.
         width="100%",
         border_bottom=styles.border,
         padding="1em",
@@ -61,7 +55,7 @@ def sidebar_item(text: str, url: str) -> rx.Component:
     """
     # Whether the item is active.
     active = (State.router.page.path == f"/{text.lower()}") | (
-        (State.router.page.path == "/") & text == "Home"
+        (State.router.page.path == "/") & text == "Strona główna"
     )
 
     return rx.link(
@@ -123,7 +117,7 @@ def sidebar() -> rx.Component:
             ),
             rx.spacer(),
             #sidebar_footer(),
-            height="100dvh",
+            height="100%",
         ),
         display=["none", "none", "block"],
         min_width=styles.sidebar_width,
diff --git a/blurme/pages/dashboard.py b/blurme/pages/dashboard.py
index 1fe1a01..a0640d7 100644
--- a/blurme/pages/dashboard.py
+++ b/blurme/pages/dashboard.py
@@ -11,11 +11,7 @@ def dashboard() -> rx.Component:
     Returns:
         The UI for the dashboard page.
     """
-    return rx.vstack(
-        rx.heading("Dashboard", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
-        rx.text(
-            "You can edit this page in ",
-            rx.code("{your_app}/pages/dashboard.py"),
-        ),
-    )
+    #return rx.vstack(
+    #    rx.heading("BlurMe", font_size="3em"),
+    #    rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
+    #)
diff --git a/blurme/pages/index.py b/blurme/pages/index.py
index d7eb9dc..fead854 100644
--- a/blurme/pages/index.py
+++ b/blurme/pages/index.py
@@ -5,20 +5,20 @@ from blurme.templates import template
 
 import reflex as rx
 
-
 @template(route="/", title="Strona główna", image="/github.svg")
 def index() -> rx.Component:
-    """The home page.
-
-    Returns:
-        The UI for the home page.
-    """
     return rx.vstack(
         rx.heading("Witaj w BlurMe!", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
-        rx.text("Dlaczego Blurme?", font_size="1.5em", font_weight="bold", margin_top="10px", margin_bottom="10px"),
+        rx.wrap(
+            rx.wrap_item(rx.text("Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!", font_size="1.2em"),
+                         w="45%",style={"flex-direction": "column"}),
+            rx.wrap_item(rx.text("Tu będzie obrazek"),)
+            ),
+    rx.link(rx.button("Zacznij anonimizować"),href= "settings",color="rgb(107,99,246)",button=True, padding = "50xp", font_size="1.2em"),
+    rx.text("Dlaczego Blurme?", font_size="1.5em", font_weight="bold", margin_top="10px", margin_bottom="10px"),
         rx.list(
             rx.list_item(rx.text("Prywatność: ",as_="b"), "Nasza aplikacja zapewnia pełną ochronę prywatności, eliminując ryzyko identyfikacji osób niezwiązanych z anonimizacją."),
-            rx.list_item(rx.text("Prost obsługa: ",as_="b"),"Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego."),
+            rx.list_item(rx.text("Prosta obsługa: ",as_="b"),"Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego."),
             rx.list_item(rx.text("Elastyczność:  ",as_="b"),"Wybierz, która twarz na zdjęciu ma pozostać niezmieniona, a my zadbamy o resztę. Indywidualizuj swoje zdjęcia zgodnie z własnymi potrzebami."),
             text_align="left"),
         rx.text("Jak to działa?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
diff --git a/blurme/pages/settings.py b/blurme/pages/settings.py
index 929d7dd..e090f47 100644
--- a/blurme/pages/settings.py
+++ b/blurme/pages/settings.py
@@ -13,10 +13,10 @@ def settings() -> rx.Component:
         The UI for the settings page.
     """
     return rx.vstack(
-        rx.heading("Settings", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
-        rx.text(
-            "You can edit this page in ",
-            rx.code("{your_app}/pages/settings.py"),
-        ),
+        rx.heading("BlurMe", font_size="3em"),
+        rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
     )
+    #    rx.text(
+    #        "You can edit this page in ",
+    #        rx.code("{your_app}/pages/settings.py"),
+    #    ),
diff --git a/blurme/styles.py b/blurme/styles.py
index 18fa632..d549586 100644
--- a/blurme/styles.py
+++ b/blurme/styles.py
@@ -7,7 +7,7 @@ box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
 border = "1px solid #F4F3F6"
 text_color = "black"
 accent_text_color = "#1A1060"
-accent_color = "#fcd2e7"
+accent_color = "#d9a2ca"
 hover_accent_color = {"_hover": {"color": accent_color}}
 hover_accent_bg = {"_hover": {"bg": accent_color}}
 content_width_vw = "90vw"