diff --git a/.web/package-lock.json b/.web/package-lock.json
index 6328801..1509679 100644
--- a/.web/package-lock.json
+++ b/.web/package-lock.json
@@ -20,6 +20,7 @@
         "next-themes": "0.2.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-dropzone": "^14.2.3",
         "socket.io-client": "4.6.1",
         "tailwindcss": "^3.3.2",
         "universal-cookie": "4.0.4"
@@ -1764,6 +1765,14 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -2215,6 +2224,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3096,6 +3116,22 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
diff --git a/.web/package.json b/.web/package.json
index fb5bdc6..630e27d 100644
--- a/.web/package.json
+++ b/.web/package.json
@@ -21,6 +21,7 @@
     "next-themes": "0.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "socket.io-client": "4.6.1",
     "tailwindcss": "^3.3.2",
     "universal-cookie": "4.0.4"
diff --git a/.web/pages/404.js b/.web/pages/404.js
index 54fd223..f76066b 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 Error from "next/error"
 import { useClientSideRouting } from "/utils/client_side_routing"
+import Error from "next/error"
 import NextHead from "next/head"
 
 
diff --git a/.web/pages/dashboard.js b/.web/pages/dashboard.js
index be614ea..b4f8ba9 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, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+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 { 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": "100%"}}>
+  <VStack sx={{"height": "100dvh"}}>
   <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") === "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"}}>
+  <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"}}>
   <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") === "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"}}>
+  <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"}}>
   <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") === "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"}}>
+  <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"}}>
   <Text>
   {`Settings`}
 </Text>
@@ -101,10 +101,16 @@ 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"}}>
-  {`BlurMe`}
+  {`Dashboard`}
 </Heading>
   <Text>
-  {`Dodaj zdjęcia, które chcesz zanonimizować!`}
+  {`Welcome to Reflex!`}
+</Text>
+  <Text>
+  {`You can edit this page in `}
+  <Code>
+  {`{your_app}/pages/dashboard.py`}
+</Code>
 </Text>
 </VStack>
 </Box>
@@ -115,28 +121,28 @@ export default function Component() {
   <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
   <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
   {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
   {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
   {`Settings`}
 </Link>
 </MenuItem>
   <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
   {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <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 1bb1717..584c877 100644
--- a/.web/pages/index.js
+++ b/.web/pages/index.js
@@ -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": "100%"}}>
+  <VStack sx={{"height": "100dvh"}}>
   <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") === "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"}}>
+  <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"}}>
   <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") === "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"}}>
+  <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"}}>
   <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") === "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"}}>
+  <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"}}>
   <Text>
   {`Settings`}
 </Text>
@@ -104,22 +104,23 @@ export default function Component() {
   {`Witaj w BlurMe!`}
 </Heading>
   <Wrap>
-  <WrapItem sx={{"flex-direction": "column", "w": "45%"}}>
-  <Text sx={{"fontSize": "1.2em"}}>
+  <WrapItem sx={{"flex-direction": "row", "margin-left": "20px"}}>
+  <Text sx={{"margin-left": "15px", "fontSize": "1.2em", "w": "45%"}}>
   {`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"}}>
+  <Link as={NextLink} href={`settings`} sx={{"margin-top": "20px", "align": "center", "color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
   <Button>
   {`Zacznij anonimizować`}
 </Button>
 </Link>
+  <Text sx={{"height": "100px"}}>
+  {` `}
+</Text>
   <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "10px", "marginBottom": "10px"}}>
   {`Dlaczego Blurme?`}
 </Text>
@@ -132,7 +133,7 @@ export default function Component() {
 </ListItem>
   <ListItem>
   <Text as={`b`}>
-  {`Prosta obsługa: `}
+  {`Prost obsługa: `}
 </Text>
   {`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`}
 </ListItem>
@@ -173,7 +174,7 @@ export default function Component() {
 </ListItem>
 </OrderedList>
   <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "20px", "marginBottom": "10px"}}>
-  {`Do Czego Może Ci Się Przydać?`}
+  {`Do Czego?`}
 </Text>
   <List>
   <ListItem sx={{"textAlign": "left"}}>
@@ -207,28 +208,28 @@ export default function Component() {
   <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
   <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
   {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
   {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
   {`Settings`}
 </Link>
 </MenuItem>
   <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
   {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <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 509e862..05545fc 100644
--- a/.web/pages/settings.js
+++ b/.web/pages/settings.js
@@ -1,11 +1,12 @@
 import { Fragment, useContext, useEffect, useRef, useState } from "react"
 import { useRouter } from "next/router"
-import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
+import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, set_val, 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, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Heading, HStack, Image, Input, 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 ReactDropzone from "react-dropzone"
 import { HamburgerIcon } from "@chakra-ui/icons"
 import NextHead from "next/head"
 
@@ -36,6 +37,7 @@ export default function Component() {
     }
   }, [router])
 
+  const [files, setFiles] = useState([]);
 
   return (
     <Fragment>
@@ -66,28 +68,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": "100%"}}>
+  <VStack sx={{"height": "100dvh"}}>
   <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") === "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"}}>
+  <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"}}>
   <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") === "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"}}>
+  <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"}}>
   <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") === "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"}}>
+  <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"}}>
   <Text>
   {`Settings`}
 </Text>
@@ -100,12 +102,22 @@ export default function Component() {
   <Box sx={{"paddingTop": "5em", "paddingX": ["auto", "2em"], "flex": "1"}}>
   <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"}}>
+  <Heading sx={{"fontSize": "3em", "marginBottom": "25px", "backgroundImage": "linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", "backgroundClip": "text", "padding": "10px"}}>
   {`BlurMe`}
 </Heading>
-  <Text>
-  {`Dodaj zdjęcia, które chcesz zanonimizować!`}
+  <Text sx={{"fontSize": "1.2em"}}>
+  {`Dodaj zdjęcie, które chcesz zanonimizować`}
 </Text>
+  <ReactDropzone multiple={true} onDrop={e => setFiles((files) => e)}>
+  {({ getRootProps, getInputProps }) => (
+    <Box sx={{"border": "1px dotted rgb(107,99,246)", "padding": "5em"}} {...getRootProps()}>
+    <Input type={`file`} {...getInputProps()}/>
+    <Text>
+    {`Drag and drop files here or click to select files`}
+  </Text>
+  </Box>
+  )}
+</ReactDropzone>
 </VStack>
 </Box>
 </Box>
@@ -115,28 +127,28 @@ export default function Component() {
   <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
   <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
   {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
   {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
   {`Settings`}
 </Link>
 </MenuItem>
   <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
   {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
   <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 7f7facc..565a2d6 100644
--- a/blurme/components/sidebar.py
+++ b/blurme/components/sidebar.py
@@ -7,6 +7,11 @@ import reflex as rx
 
 
 def sidebar_header() -> rx.Component:
+    """Sidebar header.
+
+    Returns:
+        The sidebar header component.
+    """
     return rx.hstack(
         # The logo.
         rx.image(
@@ -14,6 +19,7 @@ def sidebar_header() -> rx.Component:
             height="4.5em",
         ),
         rx.spacer(),
+        # Link to Reflex GitHub repo.
         width="100%",
         border_bottom=styles.border,
         padding="1em",
@@ -55,7 +61,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 == "Strona główna"
+        (State.router.page.path == "/") & text == "Home"
     )
 
     return rx.link(
@@ -117,7 +123,7 @@ def sidebar() -> rx.Component:
             ),
             rx.spacer(),
             #sidebar_footer(),
-            height="100%",
+            height="100dvh",
         ),
         display=["none", "none", "block"],
         min_width=styles.sidebar_width,
diff --git a/blurme/pages/dashboard.py b/blurme/pages/dashboard.py
index a0640d7..1fe1a01 100644
--- a/blurme/pages/dashboard.py
+++ b/blurme/pages/dashboard.py
@@ -11,7 +11,11 @@ def dashboard() -> rx.Component:
     Returns:
         The UI for the dashboard page.
     """
-    #return rx.vstack(
-    #    rx.heading("BlurMe", font_size="3em"),
-    #    rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
-    #)
+    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"),
+        ),
+    )
diff --git a/blurme/pages/index.py b/blurme/pages/index.py
index fead854..d0f135e 100644
--- a/blurme/pages/index.py
+++ b/blurme/pages/index.py
@@ -9,13 +9,17 @@ import reflex as rx
 def index() -> rx.Component:
     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.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.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={"margin-left": "15px"}),
+                         rx.text("Tu będzie obrazek"), style={"flex-direction": "row", "margin-left": "20px"}),),
+       
+        rx.link(
+            rx.button("Zacznij anonimizować"),
+            href="settings",align="center",color="rgb(107,99,246)",button=True,padding="50xp",font_size="1.2em",style={"margin-top": "20px" }),
+       
+
+        rx.text(" ", height = "100px"),
+        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("Prosta obsługa: ",as_="b"),"Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego."),
@@ -28,7 +32,7 @@ def index() -> rx.Component:
             rx.list_item(rx.text("Anonimizuj Resztę: ",as_="b"), "Naciśnij przycisk, a Blurme automatycznie zastosuje efekt rozmycia do wszystkich obszarów poza zaznaczoną twarzą."),
             rx.list_item(rx.text("Pobierz i Podziel Się: ",as_="b"), "Gotowe! Pobierz anonimizowane zdjęcie i dziel się nim bez obaw o prywatność.")
         ),
-        rx.text("Do Czego Może Ci Się Przydać?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
+        rx.text("Do Czego?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
         rx.list(
             rx.list_item(rx.text("Ochrona Tożsamości: ",as_="b"),"Idealne do usuwania twarzy nieznajomych lub przypadkowych przechodniów z tła.", text_align="left"),
             rx.list_item(rx.text("Zachowanie Prywatności: ",as_="b"),"Przydatne w sytuacjach, gdzie chcesz udostępnić zdjęcia publicznie, ale z zachowaniem prywatności pewnych osób.", text_align="left"),
diff --git a/blurme/pages/settings.py b/blurme/pages/settings.py
index e090f47..b3556d0 100644
--- a/blurme/pages/settings.py
+++ b/blurme/pages/settings.py
@@ -4,19 +4,11 @@ from blurme.templates import template
 
 import reflex as rx
 
-
 @template(route="/settings", title="Settings")
 def settings() -> rx.Component:
-    """The settings page.
-
-    Returns:
-        The UI for the settings page.
-    """
     return rx.vstack(
-        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"),
-    #    ),
+        rx.heading("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("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
+        rx.upload(rx.text("Drag and drop files here or click to select files"),border="1px dotted rgb(107,99,246)", padding="5em"))
+    
+
diff --git a/blurme/styles.py b/blurme/styles.py
index d549586..18fa632 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 = "#d9a2ca"
+accent_color = "#fcd2e7"
 hover_accent_color = {"_hover": {"color": accent_color}}
 hover_accent_bg = {"_hover": {"bg": accent_color}}
 content_width_vw = "90vw"