diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx
index 586cf423d..8847fb18a 100644
--- a/typescript/Frontend/src/App.tsx
+++ b/typescript/Frontend/src/App.tsx
@@ -14,12 +14,13 @@ import NavigationButtons from "./components/Layout/NavigationButtons";
 import InstallationPage from "./components/Installations/InstallationPage";
 import { UserContext } from "./components/Context/UserContextProvider";
 import ResetPassword from "./ResetPassword";
+import innovenergyLogo from "./resources/innovenergy_Logo_onOrange.png";
 
 const App = () => {
   const { token, setToken, removeToken } = useToken();
   const [language, setLanguage] = useState("EN");
 
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
 
   const getTranslations = () => {
     if (language === "DE") {
@@ -31,7 +32,7 @@ const App = () => {
   if (!token) {
     return <Login setToken={setToken} setLanguage={setLanguage} />;
   }
-  if (token && currentUser?.mustResetPassword) {
+  if (token && getCurrentUser()?.mustResetPassword) {
     return <ResetPassword />;
   }
   return (
@@ -42,15 +43,20 @@ const App = () => {
         defaultLocale="EN"
       >
         <Container maxWidth="xl" sx={{ marginTop: 2, height: "100vh" }}>
-          <Grid container spacing={2}>
-            <Grid item xs={3}>
-              <NavigationButtons />
+          <Grid container spacing={2} maxHeight="20vh">
+            <Grid item xs={3} container justifyContent="flex-start">
+              <img src={innovenergyLogo} alt="innovenergy logo" height="50" />
             </Grid>
             <Grid item xs={9} container justifyContent="flex-end">
               <LanguageSelect language={language} setLanguage={setLanguage} />
               <LogoutButton removeToken={removeToken} />
             </Grid>
           </Grid>
+          <Grid container spacing={2} mt={2}>
+            <Grid item xs={3} container justifyContent="flex-start">
+              <NavigationButtons />
+            </Grid>
+          </Grid>
           <Routes>
             <Route
               path="*"
diff --git a/typescript/Frontend/src/Login.tsx b/typescript/Frontend/src/Login.tsx
index 2d7f96ec0..11069fd2d 100644
--- a/typescript/Frontend/src/Login.tsx
+++ b/typescript/Frontend/src/Login.tsx
@@ -22,7 +22,7 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
-  const { setCurrentUser } = useContext(UserContext);
+  const { saveCurrentUser } = useContext(UserContext);
 
   const verifyToken = async (token: string) => {
     axiosConfigWithoutToken.get("/GetAllInstallations", {
@@ -39,7 +39,8 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
           verifyToken(data.token)
             .then(() => {
               setToken(data.token);
-              setCurrentUser(data.user);
+              saveCurrentUser(data.user);
+              console.log(data.user);
               setLoading(false);
               setLanguage(data.user.language);
             })
diff --git a/typescript/Frontend/src/ResetPassword.tsx b/typescript/Frontend/src/ResetPassword.tsx
index c43db5d49..3b07db745 100644
--- a/typescript/Frontend/src/ResetPassword.tsx
+++ b/typescript/Frontend/src/ResetPassword.tsx
@@ -12,7 +12,7 @@ import * as Yup from "yup";
 const ResetPassword = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<AxiosError>();
-  const { setCurrentUser } = useContext(UserContext);
+  const { saveCurrentUser } = useContext(UserContext);
 
   const validationSchema = Yup.object().shape({
     password: Yup.string().required("*Password is required"),
@@ -33,7 +33,8 @@ const ResetPassword = () => {
           params: { newPassword: formikValues.verifyPassword },
         })
         .then((res) => {
-          setCurrentUser(res.data);
+          saveCurrentUser(res.data);
+          console.log(res.data);
           setLoading(false);
         })
         .catch((err) => setError(err));
diff --git a/typescript/Frontend/src/components/Context/UserContextProvider.tsx b/typescript/Frontend/src/components/Context/UserContextProvider.tsx
index 9b18056d2..6b9f35adb 100644
--- a/typescript/Frontend/src/components/Context/UserContextProvider.tsx
+++ b/typescript/Frontend/src/components/Context/UserContextProvider.tsx
@@ -4,18 +4,36 @@ import { I_User } from "../../util/user.util";
 interface InstallationContextProviderProps {
   currentUser?: I_User;
   setCurrentUser: (value: I_User) => void;
+  saveCurrentUser: (user: I_User) => void;
+  getCurrentUser: () => I_User;
 }
 
 export const UserContext = createContext<InstallationContextProviderProps>({
   currentUser: {} as I_User,
   setCurrentUser: () => {},
+  saveCurrentUser: () => {},
+  getCurrentUser: () => {
+    return {} as I_User;
+  },
 });
 
 const UserContextProvider = ({ children }: { children: ReactNode }) => {
   const [currentUser, setCurrentUser] = useState<I_User>();
 
+  const saveCurrentUser = (user: I_User) => {
+    localStorage.setItem("currentUser", JSON.stringify(user));
+    setCurrentUser(user);
+  };
+
+  const getCurrentUser = (): I_User => {
+    const tokenString = localStorage.getItem("currentUser");
+    return tokenString !== null ? JSON.parse(tokenString) : "";
+  };
+
   return (
-    <UserContext.Provider value={{ currentUser, setCurrentUser }}>
+    <UserContext.Provider
+      value={{ currentUser, setCurrentUser, saveCurrentUser, getCurrentUser }}
+    >
       {children}
     </UserContext.Provider>
   );
diff --git a/typescript/Frontend/src/components/Context/UsersContextProvider.tsx b/typescript/Frontend/src/components/Context/UsersContextProvider.tsx
index d6150b0e3..af77b5e9c 100644
--- a/typescript/Frontend/src/components/Context/UsersContextProvider.tsx
+++ b/typescript/Frontend/src/components/Context/UsersContextProvider.tsx
@@ -21,6 +21,7 @@ interface UsersContextProviderProps {
   getAvailableUsersForResource: () => I_User[];
   fetchUsersWithInheritedAccessForResource: () => Promise<void>;
   fetchUsersWithDirectAccessForResource: () => Promise<void>;
+  fetchAvailableUsers: () => Promise<void>;
 }
 
 export const UsersContext = createContext<UsersContextProviderProps>({
@@ -39,6 +40,9 @@ export const UsersContext = createContext<UsersContextProviderProps>({
   fetchUsersWithDirectAccessForResource: () => {
     return Promise.resolve();
   },
+  fetchAvailableUsers: () => {
+    return Promise.resolve();
+  },
 });
 
 const UsersContextProvider = ({ children }: { children: ReactNode }) => {
@@ -51,7 +55,7 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
   const { currentType } = useContext(GroupContext);
   const { id } = useParams();
 
-  const fetchUsers = useCallback(
+  const fetchUsersWithAccess = useCallback(
     async (route: string, setState: (value: any) => void) => {
       axiosConfig.get(route + currentType, { params: { id } }).then((res) => {
         setState(res.data);
@@ -61,12 +65,15 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
   );
 
   const fetchUsersWithInheritedAccessForResource = useCallback(async () => {
-    fetchUsers("/GetUsersWithInheritedAccessTo", setInheritedAccessUsers);
-  }, [fetchUsers]);
+    fetchUsersWithAccess(
+      "/GetUsersWithInheritedAccessTo",
+      setInheritedAccessUsers
+    );
+  }, [fetchUsersWithAccess]);
 
   const fetchUsersWithDirectAccessForResource = useCallback(async () => {
-    fetchUsers("/GetUsersWithDirectAccessTo", setDirectAccessUsers);
-  }, [fetchUsers]);
+    fetchUsersWithAccess("/GetUsersWithDirectAccessTo", setDirectAccessUsers);
+  }, [fetchUsersWithAccess]);
 
   const getAvailableUsersForResource = () => {
     const inheritedUsers = inheritedAccessUsers.map(
@@ -81,10 +88,15 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
     );
   };
 
-  useEffect(() => {
-    axiosConfig.get("/GetAllChildUsers").then((res) => {
+  const fetchAvailableUsers = async (): Promise<void> => {
+    return axiosConfig.get("/GetAllChildUsers").then((res) => {
+      console.log(res);
       setAvailableUsers(res.data);
     });
+  };
+
+  useEffect(() => {
+    fetchAvailableUsers();
   }, []);
 
   return (
@@ -99,6 +111,7 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
         getAvailableUsersForResource,
         fetchUsersWithInheritedAccessForResource,
         fetchUsersWithDirectAccessForResource,
+        fetchAvailableUsers,
       }}
     >
       {children}
diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx
index 3cc3c7a98..733784022 100644
--- a/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx
+++ b/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx
@@ -8,13 +8,13 @@ import { useContext } from "react";
 import { UserContext } from "../../Context/UserContextProvider";
 
 const AccessManagement = () => {
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
 
   return (
     <UsersContextProvider>
       <Grid container sx={{ mt: 1 }}>
         <Grid item xs={6}>
-          {currentUser?.hasWriteAccess && <AvailableUserDialog />}
+          {getCurrentUser().hasWriteAccess && <AvailableUserDialog />}
           <InnovenergyList id="access-management-list">
             <UsersWithDirectAccess />
             <UsersWithInheritedAccess />
diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx
index 96ed26adf..0fa267e85 100644
--- a/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx
+++ b/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx
@@ -59,15 +59,16 @@ const AvailableUserDialog = () => {
         scroll="paper"
       >
         <DialogTitle id="available-user-dialog-title">
-          Grant access
+          <FormattedMessage id="manageAccess" defaultMessage="Manage access" />
         </DialogTitle>
         <DialogContent id="available-user-dialog-content">
           <Autocomplete
-            sx={{ width: "500px" }}
+            sx={{ width: "500px", pt: 1 }}
             multiple
             id="available-user-dialog-autocomplete"
             options={getAvailableUsersForResource()}
             getOptionLabel={(option) => option.name}
+            value={selectedUsers}
             renderInput={(params) => (
               <TextField
                 {...params}
@@ -86,7 +87,10 @@ const AvailableUserDialog = () => {
             sx={{ height: 40, ml: 2 }}
             onClick={handleGrant}
           >
-            <FormattedMessage id="grantAccess" defaultMessage="Grant access" />
+            <FormattedMessage
+              id="manageAccess"
+              defaultMessage="Manage access"
+            />
           </InnovenergyButton>
         </DialogActions>
       </Dialog>
@@ -95,7 +99,7 @@ const AvailableUserDialog = () => {
         type="submit"
         onClick={() => setOpen(true)}
       >
-        <FormattedMessage id="grantAccess" defaultMessage="Grant access" />
+        <FormattedMessage id="manageAccess" defaultMessage="Manage access" />
       </InnovenergyButton>
     </>
   );
diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx
index 791d354f5..aba3365f5 100644
--- a/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx
+++ b/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx
@@ -20,7 +20,7 @@ const UsersWithDirectAccess = () => {
     useContext(UsersContext);
   const { currentType } = useContext(GroupContext);
   const { id } = useParams();
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
 
   useEffect(() => {
     fetchUsersWithDirectAccessForResource();
@@ -47,7 +47,7 @@ const UsersWithDirectAccess = () => {
               <ListItem
                 id={"direct-access-user-" + user.id}
                 secondaryAction={
-                  currentUser?.hasWriteAccess && (
+                  getCurrentUser().hasWriteAccess && (
                     <IconButton
                       id={"direct-access-user-icon-button" + user.id}
                       onClick={() => handleIconClick(user.id)}
diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx
index 2796612e7..24c11f99e 100644
--- a/typescript/Frontend/src/components/Groups/FolderForm.tsx
+++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx
@@ -23,13 +23,13 @@ const FolderForm = (props: I_CustomerFormProps) => {
   const { values, additionalButtons, handleSubmit } = props;
   const intl = useIntl();
   const { fetchData } = useContext(GroupContext);
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
 
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [error, setError] = useState();
   const [loading, setLoading] = useState(false);
 
-  const readOnly = !currentUser?.hasWriteAccess;
+  const readOnly = !getCurrentUser().hasWriteAccess;
 
   const formik = useFormik({
     initialValues: {
diff --git a/typescript/Frontend/src/components/Installations/InstallationForm.tsx b/typescript/Frontend/src/components/Installations/InstallationForm.tsx
index 52d628278..b8aed2c2a 100644
--- a/typescript/Frontend/src/components/Installations/InstallationForm.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationForm.tsx
@@ -21,9 +21,9 @@ const InstallationForm = (props: I_InstallationFormProps) => {
 
   const intl = useIntl();
   const { fetchData } = useContext(InstallationContext);
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
 
-  const readOnly = !currentUser?.hasWriteAccess;
+  const readOnly = !getCurrentUser().hasWriteAccess;
 
   const formik = useFormik({
     initialValues: {
diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx
index 2988f2849..297e942bd 100644
--- a/typescript/Frontend/src/components/Installations/InstallationList.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx
@@ -64,9 +64,10 @@ const InstallationList = (props: InstallationListProps) => {
           bgcolor: "background.paper",
           position: "relative",
           overflow: "auto",
-          maxHeight: 400,
           py: 0,
           mt: 1,
+          height: "80vh",
+          maxHeight: "70vh",
         }}
         component="nav"
         aria-labelledby="nested-list-subheader"
diff --git a/typescript/Frontend/src/components/Installations/InstallationPage.tsx b/typescript/Frontend/src/components/Installations/InstallationPage.tsx
index 7650d1d67..4203a5d0e 100644
--- a/typescript/Frontend/src/components/Installations/InstallationPage.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationPage.tsx
@@ -8,7 +8,7 @@ import { Grid } from "@mui/material";
 const InstallationPage = () => {
   return (
     <>
-      <Grid container spacing={2}>
+      <Grid container spacing={2} marginTop={1}>
         <Grid item xs={3}>
           <ModeButtons />
         </Grid>
diff --git a/typescript/Frontend/src/components/Installations/Installations.tsx b/typescript/Frontend/src/components/Installations/Installations.tsx
index 4a09e0221..b79f34d9b 100644
--- a/typescript/Frontend/src/components/Installations/Installations.tsx
+++ b/typescript/Frontend/src/components/Installations/Installations.tsx
@@ -12,7 +12,7 @@ import Installation from "./Installation";
 const Installations = () => {
   return (
     <InstallationContextProvider>
-      <Grid container spacing={2}>
+      <Grid container spacing={2} height="100%">
         <Grid item xs={3}>
           <SearchSidebar
             id="installations-search-sidebar"
diff --git a/typescript/Frontend/src/components/Layout/Search.tsx b/typescript/Frontend/src/components/Layout/Search.tsx
index effd13eed..52bc74d1f 100644
--- a/typescript/Frontend/src/components/Layout/Search.tsx
+++ b/typescript/Frontend/src/components/Layout/Search.tsx
@@ -12,7 +12,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
   const intl = useIntl();
 
   return (
-    <>
+    <div style={{ height: "100%" }}>
       <TextField
         id={id}
         label={intl.formatMessage({
@@ -25,7 +25,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
         onChange={(e) => setSearchQuery(e.target.value)}
       />
       <ListComponent searchQuery={searchQuery} />
-    </>
+    </div>
   );
 };
 
diff --git a/typescript/Frontend/src/components/Users/User.tsx b/typescript/Frontend/src/components/Users/User.tsx
index c18572f00..7c6e3ee8d 100644
--- a/typescript/Frontend/src/components/Users/User.tsx
+++ b/typescript/Frontend/src/components/Users/User.tsx
@@ -7,10 +7,10 @@ import { I_User } from "../../util/user.util";
 import UserForm from "./UserForm";
 import { useIntl } from "react-intl";
 
-interface I_DetailProps<T> {
+interface I_DetailProps {
   hasMoveButton?: boolean;
 }
-const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
+const Detail = (props: I_DetailProps) => {
   const { id } = useParams();
   const { locale } = useIntl();
   const [values, setValues] = useState<I_User>();
diff --git a/typescript/Frontend/src/components/Users/UserForm.tsx b/typescript/Frontend/src/components/Users/UserForm.tsx
index 8fb9e5f6e..d7ab9f5ec 100644
--- a/typescript/Frontend/src/components/Users/UserForm.tsx
+++ b/typescript/Frontend/src/components/Users/UserForm.tsx
@@ -7,6 +7,7 @@ import { I_User } from "../../util/user.util";
 import InnovenergyButton from "../Layout/InnovenergyButton";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
 import { UserContext } from "../Context/UserContextProvider";
+import { UsersContext } from "../Context/UsersContextProvider";
 
 interface I_UserFormProps {
   handleSubmit: (formikValues: Partial<I_User>) => Promise<AxiosResponse>;
@@ -19,9 +20,11 @@ const UserForm = (props: I_UserFormProps) => {
   const [error, setError] = useState<AxiosError>();
 
   const intl = useIntl();
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
+  const { fetchAvailableUsers } = useContext(UsersContext);
 
-  const readOnly = !currentUser?.hasWriteAccess;
+  const currentUser = getCurrentUser();
+  const readOnly = !currentUser.hasWriteAccess;
 
   const formik = useFormik({
     initialValues: {
@@ -34,6 +37,7 @@ const UserForm = (props: I_UserFormProps) => {
       handleSubmit(formikValues)
         .then(() => {
           setOpen(true);
+          fetchAvailableUsers();
           setLoading(false);
         })
         .catch((err: AxiosError) => {
@@ -85,7 +89,7 @@ const UserForm = (props: I_UserFormProps) => {
       />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
         {loading && <CircularProgress />}
-        {currentUser?.hasWriteAccess && (
+        {currentUser.hasWriteAccess && (
           <InnovenergyButton type="submit">
             <FormattedMessage id="submit" defaultMessage="Submit" />
           </InnovenergyButton>
diff --git a/typescript/Frontend/src/components/Users/UserTabs.tsx b/typescript/Frontend/src/components/Users/UserTabs.tsx
index c44fac79b..6a3068d02 100644
--- a/typescript/Frontend/src/components/Users/UserTabs.tsx
+++ b/typescript/Frontend/src/components/Users/UserTabs.tsx
@@ -14,26 +14,22 @@ const UserTabs = () => {
 
   if (id) {
     return (
-      <Box sx={{ width: "100%" }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-          <AntTabs
-            id="users-tabs"
-            value={routeMatch?.pattern?.path ?? routes.user + ":id"}
-            aria-label="user tabs"
-          >
-            <StyledTab
-              id="users-tab-user"
-              label={intl.formatMessage({
-                id: "user",
-                defaultMessage: "User",
-              })}
-              value={routes.users + routes.user + ":id"}
-              component={Link}
-              to={routes.user + id}
-            />
-          </AntTabs>
-        </Box>
-      </Box>
+      <AntTabs
+        id="users-tabs"
+        value={routeMatch?.pattern?.path ?? routes.user + ":id"}
+        aria-label="user tabs"
+      >
+        <StyledTab
+          id="users-tab-user"
+          label={intl.formatMessage({
+            id: "user",
+            defaultMessage: "User",
+          })}
+          value={routes.users + routes.user + ":id"}
+          component={Link}
+          to={routes.user + id}
+        />
+      </AntTabs>
     );
   }
   return null;
diff --git a/typescript/Frontend/src/components/Users/Users.tsx b/typescript/Frontend/src/components/Users/Users.tsx
index 03cc73db2..accfdbf31 100644
--- a/typescript/Frontend/src/components/Users/Users.tsx
+++ b/typescript/Frontend/src/components/Users/Users.tsx
@@ -11,13 +11,13 @@ import { useContext } from "react";
 import { UserContext } from "../Context/UserContextProvider";
 
 const Users = () => {
-  const { currentUser } = useContext(UserContext);
+  const { getCurrentUser } = useContext(UserContext);
 
   return (
     <UsersContextProvider>
-      <Grid container spacing={2}>
+      <Grid container spacing={2} marginTop={1}>
         <Grid item xs={3}>
-          {currentUser?.hasWriteAccess && <AddUser />}
+          {getCurrentUser().hasWriteAccess && <AddUser />}
           <SearchSidebar id="users-search-sidebar" listComponent={UserList} />
         </Grid>
         <Grid item xs={9}>
diff --git a/typescript/Frontend/src/config/axiosConfig.tsx b/typescript/Frontend/src/config/axiosConfig.tsx
index f71357136..38e7e1f81 100644
--- a/typescript/Frontend/src/config/axiosConfig.tsx
+++ b/typescript/Frontend/src/config/axiosConfig.tsx
@@ -10,7 +10,7 @@ const axiosConfig = axios.create({
 axiosConfig.defaults.params = {};
 axiosConfig.interceptors.request.use(
   (config) => {
-    const tokenString = sessionStorage.getItem("token");
+    const tokenString = localStorage.getItem("token");
     const token = tokenString !== null ? JSON.parse(tokenString) : "";
     if (token) {
       config.params["authToken"] = token;
diff --git a/typescript/Frontend/src/hooks/useToken.tsx b/typescript/Frontend/src/hooks/useToken.tsx
index e20c7198b..b7e7ed706 100644
--- a/typescript/Frontend/src/hooks/useToken.tsx
+++ b/typescript/Frontend/src/hooks/useToken.tsx
@@ -2,18 +2,18 @@ import { useState } from "react";
 
 const useToken = () => {
   const getToken = () => {
-    const tokenString = sessionStorage.getItem("token");
+    const tokenString = localStorage.getItem("token");
     return tokenString !== null ? JSON.parse(tokenString) : "";
   };
 
   const [token, setToken] = useState(getToken());
   const saveToken = (userToken: any) => {
-    sessionStorage.setItem("token", JSON.stringify(userToken));
+    localStorage.setItem("token", JSON.stringify(userToken));
     setToken(userToken);
   };
 
   const removeToken = () => {
-    sessionStorage.removeItem("token");
+    localStorage.removeItem("token");
     setToken(null);
   };
 
diff --git a/typescript/Frontend/src/index.tsx b/typescript/Frontend/src/index.tsx
index a5c14d630..262364be0 100644
--- a/typescript/Frontend/src/index.tsx
+++ b/typescript/Frontend/src/index.tsx
@@ -15,6 +15,15 @@ const theme = createTheme({
     primary: {
       main: "#F59100",
     },
+    text: {
+      primary: "#000000",
+      secondary: "#000000",
+      disabled: "#000000",
+    },
+  },
+  typography: {
+    fontFamily: `"Ubuntu", sans-serif`,
+    fontWeightRegular: 300,
   },
 });
 
diff --git a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png b/typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png
new file mode 100644
index 000000000..22e9c6412
Binary files /dev/null and b/typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png differ
diff --git a/typescript/Frontend/src/util/installation.util.tsx b/typescript/Frontend/src/util/installation.util.tsx
index e1719c224..648393443 100644
--- a/typescript/Frontend/src/util/installation.util.tsx
+++ b/typescript/Frontend/src/util/installation.util.tsx
@@ -3,9 +3,9 @@ import { styled, Tab, Tabs } from "@mui/material";
 export const StyledTab = styled((props: any) => (
   <Tab disableRipple {...props} />
 ))(({ theme }) => ({
-  textTransform: "none",
+  textTransform: "uppercase",
   fontWeight: theme.typography.fontWeightRegular,
-  fontSize: theme.typography.pxToRem(15),
+  fontSize: theme.typography.pxToRem(14),
   marginRight: theme.spacing(1),
   background: "0 0",
   border: "1px solid transparent",
@@ -15,9 +15,9 @@ export const StyledTab = styled((props: any) => (
   textDecoration: "none",
   transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
   "&.Mui-selected": {
-    color: "#495057",
+    color: "#000000",
     backgroundColor: "#fff",
-    borderColor: "#dee2e6 #dee2e6 #fff",
+    borderColor: "#bdbdbd #bdbdbd #fff",
     marginBottom: "-3px",
   },
   "&.Mui-focusVisible": {
@@ -26,19 +26,22 @@ export const StyledTab = styled((props: any) => (
 }));
 
 export const AntTabs = styled(Tabs)({
-  borderBottom: "1px solid #dee2e6",
+  borderBottom: "1px solid #bdbdbd",
   overflow: "visible!important",
   "& div.MuiTabs-scroller": {
     overflow: "visible!important",
   },
   "&.Mui-selected": {
-    color: "#495057",
+    color: "#000000",
     backgroundColor: "red",
-    borderColor: `#dee2e6 #dee2e6 #fff`,
+    borderColor: `#bdbdbd #bdbdbd #fff`,
   },
   "& .MuiTabs-indicator": {
     display: "flex",
     justifyContent: "center",
     backgroundColor: "transparent",
   },
+  "&.MuiTabs-root": {
+    width: "100%",
+  },
 });