diff --git a/csharp/App/Backend/MailerConfig.json b/csharp/App/Backend/MailerConfig.json
new file mode 100644
index 000000000..b5de08366
--- /dev/null
+++ b/csharp/App/Backend/MailerConfig.json
@@ -0,0 +1,8 @@
+{
+ "SmtpServerUrl" : "mail.agenturserver.de",
+ "SmtpUsername" : "p518526p69",
+ "SmtpPassword" : "i;b*xqm4iB5uhl",
+ "SmtpPort" : 587,
+ "SenderName" : "InnovEnergy",
+ "SenderAddress" : "noreply@innov.energy"
+}
diff --git a/typescript/frontend-marios2/src/Resources/images/innovenergy-Logo_Speichern-mit-Salz_R_color.svg b/typescript/frontend-marios2/src/Resources/images/innovenergy-Logo_Speichern-mit-Salz_R_color.svg
new file mode 100644
index 000000000..6b5ebc1a2
--- /dev/null
+++ b/typescript/frontend-marios2/src/Resources/images/innovenergy-Logo_Speichern-mit-Salz_R_color.svg
@@ -0,0 +1,88 @@
+
+
+
diff --git a/typescript/frontend-marios2/src/components/SetNewPassword.tsx b/typescript/frontend-marios2/src/components/SetNewPassword.tsx
new file mode 100644
index 000000000..ab51e060a
--- /dev/null
+++ b/typescript/frontend-marios2/src/components/SetNewPassword.tsx
@@ -0,0 +1,214 @@
+import React, { useContext, useState } from 'react';
+import {
+ Box,
+ Button,
+ CircularProgress,
+ Container,
+ Grid,
+ Modal,
+ TextField,
+ Typography,
+ useTheme
+} from '@mui/material';
+import innovenergyLogo from 'src/Resources/innoveng_logo_on_orange.png';
+import axiosConfig from 'src/Resources/axiosConfig';
+import { UserContext } from 'src/contexts/userContext';
+import { TokenContext } from 'src/contexts/tokenContext';
+import { useNavigate } from 'react-router-dom';
+import Avatar from '@mui/material/Avatar';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+
+function SetNewPassword() {
+ const [username, setUsername] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [rememberMe, setRememberMe] = useState(false);
+ const [open, setOpen] = useState(false);
+ const theme = useTheme();
+ const context = useContext(UserContext);
+ const navigate = useNavigate();
+ const [password, setPassword] = useState('');
+ const [verifypassword, setVerifyPassword] = useState('');
+
+ if (!context) {
+ return null;
+ }
+ const { currentUser, setUser, removeUser } = context;
+
+ const tokencontext = useContext(TokenContext);
+ const { token, setNewToken, removeToken } = tokencontext;
+
+ const handlePasswordChange = (e) => {
+ const { name, value } = e.target;
+ setPassword(value);
+ };
+
+ const handleVerifiedPasswordChange = (e) => {
+ const { name, value } = e.target;
+ setVerifyPassword(value);
+ };
+ const handleSubmit = () => {
+ setLoading(true);
+ axiosConfig
+ .put('/UpdatePassword', undefined, {
+ params: { newPassword: password }
+ })
+ .then((res) => {
+ setLoading(false);
+ currentUser.mustResetPassword = false;
+ setUser(currentUser);
+ window.location.reload();
+ })
+ .catch((error) => {
+ setLoading(false);
+ setOpen(true);
+
+ if (error.response && error.response.status == 401) {
+ removeToken();
+ }
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ Set New Password
+
+
+
+
+
+ {loading && (
+
+ )}
+
+ {password != verifypassword && (
+
+ Passwords do not match
+
+ )}
+
+
+
+ setOpen(false)}
+ aria-labelledby="error-modal"
+ aria-describedby="error-modal-description"
+ >
+
+
+ Setting new password failed. Please try again.
+
+
+
+
+
+
+
+ );
+}
+
+export default SetNewPassword;