diff --git a/web/public/logo-dark.png b/web/public/logo-dark.png
new file mode 100644
index 0000000..ee739a4
Binary files /dev/null and b/web/public/logo-dark.png differ
diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx
index d1e0d3a..1b6a3d0 100644
--- a/web/src/components/Login.jsx
+++ b/web/src/components/Login.jsx
@@ -115,7 +115,7 @@ export default function ({ navigate }) {
             <Container maxWidth="md" className={classes.pageContainer}>
                 <Paper elevation={3}>
                     <form className={classes.boxWrapper} onSubmit={onLoginClick}>
-                        <img className={classes.logo} src={`../logo.png`} alt={"logo"} />
+                        <img className={classes.logo} src={isDarkMode ? darkLogo : lightLogo} alt={"logo"} />
                         <Typography className={classes.textWelcome} color="textSecondary" variant="subtitle1">Welcome back!</Typography>
                         <TextField error={result.status === "failure"} InputLabelProps={inputLabelProps} InputProps={inputProps} name="email" onChange={event => setEmail(event.target.value)} label="Email" type="email" variant="outlined" fullWidth margin="normal" />
                         <TextField error={result.status === "failure"} InputLabelProps={inputLabelProps} InputProps={inputProps} name="password" onChange={event => setPassword(event.target.value)} label="Password" type="password" variant="outlined" fullWidth margin="normal" helperText={result.error} />
@@ -128,4 +128,4 @@ export default function ({ navigate }) {
             <Typography className={classes.textAttribution} color="textSecondary" variant="body2">Created by <a className={classes.textCreator} href="https://github.com/anselm94">Merbin J Anselm</a></Typography>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/web/src/components/Main.jsx b/web/src/components/Main.jsx
index 9a2f528..b45df18 100644
--- a/web/src/components/Main.jsx
+++ b/web/src/components/Main.jsx
@@ -5,6 +5,8 @@ import NotesArea from "./mainarea/NotesArea";
 import Box from "@material-ui/core/Box";
 import Container from "@material-ui/core/Container";
 import Loading from "./Loading";
+import lightLogo from '../logo.png';
+import darkLogo from '../logo-dark.png';
 import { useSubscription, useQuery } from "urql";
 import { subscribeTodos, getTodosAndLabels, subscribeLabels } from "../gql";
 import { TodosProvider, LabelsProvider, UiProvider, UserProvider, useUserStore, useTodosStore, useLabelsStore } from "../store";
@@ -72,4 +74,4 @@ function ThemeControlledComponent() {
             </Container>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/web/src/components/Register.jsx b/web/src/components/Register.jsx
index 0f002cd..d6d2763 100644
--- a/web/src/components/Register.jsx
+++ b/web/src/components/Register.jsx
@@ -116,7 +116,7 @@ export default function ({ navigate }) {
             <Container maxWidth="md" className={classes.pageContainer}>
                 <Paper elevation={3}>
                     <form className={classes.boxWrapper} onSubmit={onRegisterClick}>
-                        <img className={classes.logo} src={`../logo.png`} alt={"logo"} />
+                        <img className={classes.logo} src={isDarkMode ? darkLogo : lightLogo} alt={"logo"} />
                         <Typography className={classes.textWelcome} color="textSecondary" variant="subtitle1">Hello!</Typography>
                         <TextField required InputLabelProps={inputLabelProps} InputProps={inputProps} name="name" label="Name" type="text" variant="outlined" value={name} onChange={event => setName(event.target.value)} error={result.status === "failure"} helperText={result.errors && result.errors["name"] && result.errors["name"][0]} fullWidth margin="normal" />
                         <TextField required InputLabelProps={inputLabelProps} InputProps={inputProps} name="email" label="Email" type="email" variant="outlined" value={email} error={result.status === "failure"} helperText={(result.errors && ((result.errors["email"] && result.errors["email"][0]) || (result.errors[""] && result.errors[""][0]))) || "Use any dummy email. I don't collect emails ;)"} onChange={event => setEmail(event.target.value)} fullWidth margin="normal" />
@@ -130,4 +130,4 @@ export default function ({ navigate }) {
             <Typography className={classes.textAttribution} color="textSecondary" variant="body2">Created by <a className={classes.textCreator} href="https://github.com/anselm94">Merbin J Anselm</a></Typography>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/web/src/components/appbar/AppBar.jsx b/web/src/components/appbar/AppBar.jsx
index f418f42..62c2aa8 100644
--- a/web/src/components/appbar/AppBar.jsx
+++ b/web/src/components/appbar/AppBar.jsx
@@ -189,7 +189,7 @@ function LogoContainer() {
   const classes = useStyles();
   return (
     <div className={classes.logoContainer}>
-      <img className={classes.logo} src={`../../logo.png`} alt={"logo"} />
+      <img className={classes.logo} src={isDarkMode ? darkLogo : lightLogo} alt={"logo"} />
       <Typography
         color="textSecondary"
         className={classes.title}