diff --git a/resq/frontend/src/App.js b/resq/frontend/src/App.js
index f9364c22..148abc31 100644
--- a/resq/frontend/src/App.js
+++ b/resq/frontend/src/App.js
@@ -8,6 +8,7 @@ import MapPage from "./pages/MapPage";
 import Account from "./pages/Account";
 import RoleRequest from "./pages/RoleRequest";
 import LogoutIcon from '@mui/icons-material/Logout';
+import NotificationsIcon from '@mui/icons-material/Notifications';
 import Request from "./pages/RequestCreation";
 import Resource from "./pages/ResourceCreation";
 import {LocalizationProvider} from "@mui/x-date-pickers";
@@ -15,6 +16,9 @@ import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import axios from "axios";
 import VictimMapPage from "./pages/VictimMapPage";
+import {Badge} from "@mui/material";
+import {createTheme, ThemeProvider} from "@mui/material/styles";
+import Notifications from "./pages/Notifications";
 
 const SmallRedCircle = () =>
     <svg
@@ -44,6 +48,17 @@ function App() {
         axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
     }, [token])
 
+    const [notifications, setNotifications] = useState([
+        {
+            title: "Ongoing fire on Cami Sk.",
+            desc: "A fire has been reported on Rumeli Hisarı Mh, Cami Sk, Sarıyer/İstanbul.",
+            read: false
+        }, {
+            title: "New Soup Kitchen Near You",
+            desc: "A soup kitchen has opened on Etiler, Hisar Üstü Nispetiye Cd No:1, Beşiktaş/İstanbul.",
+            read: true
+        }
+    ])
     const setToken = t => {
         localStorage.setItem("token", t || "")
         _setToken(t)
@@ -71,125 +86,128 @@ function App() {
 
     const ref = useRef(null)
 
+    const theme = createTheme({
+        palette: {
+            primary: {
+                main: "#ff0000"
+            },
+            secondary: {
+                main: '#00f0ff'
+            }
+        }
+    });
+
     return (
         <QueryClientProvider client={queryClient}>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <Router>
-                    <div>
-                        <Navbar bg="light" variant="light" expand="lg">
-                            <Container ref={ref}>
-                                <Navbar.Brand href="/" style={{color: 'red', fontWeight: 'bold'}}>
-                                    <SmallRedCircle/>
-                                    ResQ
-                                </Navbar.Brand>
-                                <Navbar.Toggle aria-controls="basic-navbar-nav"/>
-                                <Navbar.Collapse id="basic-navbar-nav">
-                                    <Nav className="me-auto">
-                                        {navLinks.map(({path, label, icon}) => (
-                                            <Nav.Link key={path} href={path}>
-                                                {icon}
-                                                {label}
-                                            </Nav.Link>
-                                        ))}
-                                    </Nav>
-                                    <Nav className="ml-auto">
-                                        {token ?
-                                            <>
-                                                <Nav.Link key={"/account"} href={"/account"}
-                                                          style={{"marginLeft": "auto"}}>
-                                                    <SmallRedCircle/>
-                                                    <strong>Account</strong>
-                                                </Nav.Link>
-                                                <Nav.Link key={"/requestcreation"} href={"/requestcreation"}
-                                                          style={{"marginLeft": "auto"}}>
-                                                    <SmallRedCircle/>
-                                                    <strong>Create Request</strong>
-                                                </Nav.Link>
-                                                <Nav.Link key={"/resourcecreation"} href={"/resourcecreation"}
-                                                          style={{"marginLeft": "auto"}}>
-                                                    <SmallRedCircle/>
-                                                    <strong>Create Resource</strong>
-                                                </Nav.Link>
-                                                <Nav.Link key={"signout"} href={"#"} onClick={signOut}
-                                                          style={{"marginLeft": "auto"}}>
-                                                    <LogoutIcon/>
-                                                </Nav.Link>
-                                            </> :
-                                            <>
-                                                <Nav.Link key={'/signin'} href={'/signin'}
-                                                          style={{"marginLeft": "auto"}}>
-                                                    <strong>Sign In</strong>
-                                                </Nav.Link>
-                                                <Nav.Link key={'/signup'} href={'/signup'}
-                                                          style={{"marginLeft": "auto"}}>
-                                                    <strong>Sign Up</strong>
+                <ThemeProvider theme={theme}>
+                    <Router>
+                        <div>
+                            <Navbar bg="light" variant="light" expand="lg">
+                                <Container ref={ref}>
+                                    <Navbar.Brand href="/" style={{color: 'red', fontWeight: 'bold'}}>
+                                        <SmallRedCircle/>
+                                        ResQ
+                                    </Navbar.Brand>
+                                    <Navbar.Toggle aria-controls="basic-navbar-nav"/>
+                                    <Navbar.Collapse id="basic-navbar-nav">
+                                        <Nav className="me-auto">
+                                            {navLinks.map(({path, label, icon}) => (
+                                                <Nav.Link key={path} href={path}>
+                                                    {icon}
+                                                    {label}
                                                 </Nav.Link>
+                                            ))}
+                                        </Nav>
+                                        <Nav className="ml-auto">
+                                            {token ?
+                                                <>
+                                                    <Nav.Link key={"/account"} href={"/account"}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <SmallRedCircle/>
+                                                        <strong>Account</strong>
+                                                    </Nav.Link>
+                                                    <Nav.Link key={"/requestcreation"} href={"/requestcreation"}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <SmallRedCircle/>
+                                                        <strong>Create Request</strong>
+                                                    </Nav.Link>
+                                                    <Nav.Link key={"/resourcecreation"} href={"/resourcecreation"}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <SmallRedCircle/>
+                                                        <strong>Create Resource</strong>
+                                                    </Nav.Link>
+                                                    <Nav.Link key={"/notifications"} href={"/notifications"}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <Badge badgeContent={notifications.filter(n => !n?.read).length}
+                                                               color={"primary"}>
+                                                            <NotificationsIcon/>
+                                                        </Badge>
+                                                    </Nav.Link>
+                                                    <Nav.Link key={"signout"} href={"#"} onClick={signOut}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <LogoutIcon/>
+                                                    </Nav.Link>
+                                                </> :
+                                                <>
+                                                    <Nav.Link key={'/signin'} href={'/signin'}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <strong>Sign In</strong>
+                                                    </Nav.Link>
+                                                    <Nav.Link key={'/signup'} href={'/signup'}
+                                                              style={{"marginLeft": "auto"}}>
+                                                        <strong>Sign Up</strong>
+                                                    </Nav.Link>
+                                                </>
+                                            }
+                                        </Nav>
+                                    </Navbar.Collapse>
+                                </Container>
+                            </Navbar>
+
+                            <main style={{height: `${height - 57}px`}}>
+                                <Routes>
+                                    {navLinks.map(({path, component}) => (
+                                        <Route key={path} path={path}
+                                               element={React.createElement(component, {
+                                                   token,
+                                                   setToken,
+                                                   role,
+                                                   setRole
+                                               })}/>
+                                    ))}
+                                    <Route path="/" element={<Navigate to="/map"/>}/>
+                                    <Route path="/rolerequest" state={{token, setToken}}
+                                           element={React.createElement(RoleRequest, {token, setToken})}/>
+                                    {
+                                        token ? <>
+                                                <Route path="/account" state={{token, setToken}}
+                                                       element={React.createElement(Account, {token, setToken})}/>
+                                                <Route path="/requestcreation" state={{token, setToken}}
+                                                       element={React.createElement(Request, {token, setToken})}/>
+                                                <Route path="/notifications" state={{token, setToken}}
+                                                       element={React.createElement(Notifications, {
+                                                           token,
+                                                           notifications,
+                                                           setNotifications
+                                                       })}/>
+                                                <Route path="/resourcecreation" state={{token, setToken}}
+                                                       element={React.createElement(Resource, {token, setToken})}/>
+                                            </>
+                                            : <>
+                                                <Route path="/signin" state={{token, setToken}}
+                                                       element={React.createElement(SignIn, {token, setToken})}/>
+                                                <Route path="/signup" state={{token, setToken}}
+                                                       element={React.createElement(SignUp, {token, setToken})}/>
                                             </>
-                                        }
-                                    </Nav>
-                                </Navbar.Collapse>
-                            </Container>
-                        </Navbar>
-                        <main style={{height: `${height - 57}px`}}>
-                            <Routes>
-                                {navLinks.map(({path, component}) => (
-                                    <Route key={path} path={path}
-                                           element={React.createElement(component, {token, setToken, role, setRole})}/>
-                                ))}
-                                <Route path="/" element={<Navigate to="/map"/>}/>
-                                <Route path="/rolerequest" state={{token, setToken}}
-                                       element={React.createElement(RoleRequest, {token, setToken})}/>
-                                {
-                                    token ? <>
-                                            <Route path="/account" state={{token, setToken}}
-                                                   element={React.createElement(Account, {token, setToken})}/>
-                                            <Route path="/requestcreation" state={{token, setToken}}
-                                                   element={React.createElement(Request, {token, setToken})}/>
-                                            <Route path="/resourcecreation" state={{token, setToken}}
-                                                   element={React.createElement(Request, {token, setToken})}/>
-                                        </>
-                                        : <>
-                                            <Route path="/signin" state={{token, setToken}}
-                                                   element={React.createElement(SignIn, {token, setToken})}/>
-                                            <Route path="/signup" state={{token, setToken}}
-                                                   element={React.createElement(SignUp, {token, setToken})}/>
-                                        </>
                                     }
-                                </Nav>
-                            </Navbar.Collapse>
-                        </Container>
-                    </Navbar>
-                    <main style={{ height: `${height - 57}px` }}>
-                        <Routes>
-                            {navLinks.map(({ path, component }) => (
-                                <Route key={path} path={path}
-                                    element={React.createElement(component, { token, setToken, role, setRole })} />
-                            ))}
-                            <Route path="/" element={<Navigate to="/map" />} />
-                            <Route path="/rolerequest" state={{ token, setToken }}
-                                element={React.createElement(RoleRequest, { token, setToken })} />
-                            {
-                                token ? <>
-                                    <Route path="/account" state={{ token, setToken }}
-                                        element={React.createElement(Account, { token, setToken })} />
-                                    <Route path="/requestcreation" state={{ token, setToken }}
-                                        element={React.createElement(Request, { token, setToken })} />
-                                    <Route path="/resourcecreation" state={{ token, setToken }}
-                                        element={React.createElement(Resource, { token, setToken })} />
-                                </>
-                                    : <>
-                                        <Route path="/signin" state={{ token, setToken }}
-                                            element={React.createElement(SignIn, { token, setToken })} />
-                                        <Route path="/signup" state={{ token, setToken }}
-                                            element={React.createElement(SignUp, { token, setToken })} />
-                                    </>
-                            }
-                        </Routes>
-                    </main>
-                </div>
-            </Router>
-        </QueryClientProvider>
-    );
+                                </Routes>
+                            </main>
+                        </div>
+                    </Router>
+                </ThemeProvider>
+            </LocalizationProvider>
+        </QueryClientProvider>);
 }
 
 export default App;
\ No newline at end of file
diff --git a/resq/frontend/src/components/RequestAddress.js b/resq/frontend/src/components/Request/RequestAddress.js
similarity index 99%
rename from resq/frontend/src/components/RequestAddress.js
rename to resq/frontend/src/components/Request/RequestAddress.js
index 61688d50..43a481e7 100644
--- a/resq/frontend/src/components/RequestAddress.js
+++ b/resq/frontend/src/components/Request/RequestAddress.js
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import disasterImage from '../disaster.png';
+import disasterImage from '../../disaster.png';
 import Avatar from '@mui/material/Avatar';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
diff --git a/resq/frontend/src/components/RequestDetails1.js b/resq/frontend/src/components/Request/RequestDetails1.js
similarity index 100%
rename from resq/frontend/src/components/RequestDetails1.js
rename to resq/frontend/src/components/Request/RequestDetails1.js
diff --git a/resq/frontend/src/components/RequestDetails2.js b/resq/frontend/src/components/Request/RequestDetails2.js
similarity index 100%
rename from resq/frontend/src/components/RequestDetails2.js
rename to resq/frontend/src/components/Request/RequestDetails2.js
diff --git a/resq/frontend/src/components/RequestDetails3.js b/resq/frontend/src/components/Request/RequestDetails3.js
similarity index 100%
rename from resq/frontend/src/components/RequestDetails3.js
rename to resq/frontend/src/components/Request/RequestDetails3.js
diff --git a/resq/frontend/src/components/RequestReview.js b/resq/frontend/src/components/Request/RequestReview.js
similarity index 100%
rename from resq/frontend/src/components/RequestReview.js
rename to resq/frontend/src/components/Request/RequestReview.js
diff --git a/resq/frontend/src/components/ResourceAddress.js b/resq/frontend/src/components/Resource/ResourceAddress.js
similarity index 99%
rename from resq/frontend/src/components/ResourceAddress.js
rename to resq/frontend/src/components/Resource/ResourceAddress.js
index 170fc6c1..af704eb2 100644
--- a/resq/frontend/src/components/ResourceAddress.js
+++ b/resq/frontend/src/components/Resource/ResourceAddress.js
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import disasterImage from '../disaster.png';
+import disasterImage from '../../disaster.png';
 import Avatar from '@mui/material/Avatar';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
diff --git a/resq/frontend/src/components/ResourceContext.js b/resq/frontend/src/components/Resource/ResourceContext.js
similarity index 100%
rename from resq/frontend/src/components/ResourceContext.js
rename to resq/frontend/src/components/Resource/ResourceContext.js
diff --git a/resq/frontend/src/components/ResourceDetail1.js b/resq/frontend/src/components/Resource/ResourceDetail1.js
similarity index 100%
rename from resq/frontend/src/components/ResourceDetail1.js
rename to resq/frontend/src/components/Resource/ResourceDetail1.js
diff --git a/resq/frontend/src/components/ResourceDetail2.js b/resq/frontend/src/components/Resource/ResourceDetail2.js
similarity index 100%
rename from resq/frontend/src/components/ResourceDetail2.js
rename to resq/frontend/src/components/Resource/ResourceDetail2.js
diff --git a/resq/frontend/src/pages/Notifications.js b/resq/frontend/src/pages/Notifications.js
new file mode 100644
index 00000000..f3b19b44
--- /dev/null
+++ b/resq/frontend/src/pages/Notifications.js
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import Link from '@mui/material/Link';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import {createTheme, ThemeProvider} from '@mui/material/styles';
+import Container from '@mui/material/Container';
+import {Card, CardContent, CardHeader} from "@mui/material";
+
+
+function Copyright(props) {
+    return (
+        <div style={{position: 'fixed', bottom: 0, width: '100%'}}>
+            <Typography variant="body2" color="text.secondary" align="center" {...props}>
+                {'Copyright © '}
+                <Link color="inherit" href="https://github.com/bounswe/bounswe2023group1">
+                    <span style={{fontWeight: 'bold'}}>ResQ</span>
+                </Link>{' '}
+                {new Date().getFullYear()}
+                {'.'}
+            </Typography>
+        </div>
+    );
+}
+
+const customTheme = createTheme({
+    palette: {
+        primary: {
+            main: '#FF0000',
+        },
+    },
+});
+
+const NotificationCard = ({notif, onClick}) => <Card
+    sx={{marginBottom: "24px", backgroundColor: notif.read ? "lightgrey" : "white"}}
+    onClick={onClick}
+>
+    <CardHeader title={notif.title}/>
+    <CardContent>
+        <Typography variant="body2" color="text.primary" sx={{fontSize: '16px'}}>
+            {notif.desc}
+        </Typography>
+    </CardContent>
+</Card>
+
+// noinspection JSUnusedLocalSymbols
+export default function Notifications({token, notifications, setNotifications}) {
+
+    const handleNotifRead = (i) => {
+        const new_notifs = JSON.parse(JSON.stringify(notifications))
+        new_notifs[i].read = true
+        setNotifications(new_notifs)
+    }
+
+    return (
+        <ThemeProvider theme={customTheme}>
+            <Container component="main" maxWidth="xs">
+                <CssBaseline/>
+                <Box
+                    sx={{
+                        marginTop: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                >
+                    {
+                        notifications.map((notif, i) => <NotificationCard notif={notif} onClick={() => notif.read || handleNotifRead(i)}/>)
+                    }
+
+                </Box>
+            </Container>
+            <Copyright sx={{mt: 5}}/>
+        </ThemeProvider>
+    );
+}
+
diff --git a/resq/frontend/src/pages/RequestCreation.js b/resq/frontend/src/pages/RequestCreation.js
index 1423c90b..fa4e1e31 100644
--- a/resq/frontend/src/pages/RequestCreation.js
+++ b/resq/frontend/src/pages/RequestCreation.js
@@ -11,11 +11,11 @@ import StepLabel from '@mui/material/StepLabel';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import RequestAddress from '../components/RequestAddress';
-import RequestDetails1 from '../components/RequestDetails1';
-import RequestDetails2 from '../components/RequestDetails2';
-import RequestDetails3 from '../components/RequestDetails3';
-import RequestReview from '../components/RequestReview';
+import RequestAddress from '../components/Request/RequestAddress';
+import RequestDetails1 from '../components/Request/RequestDetails1';
+import RequestDetails2 from '../components/Request/RequestDetails2';
+import RequestDetails3 from '../components/Request/RequestDetails3';
+import RequestReview from '../components/Request/RequestReview';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 function Copyright(props) {
diff --git a/resq/frontend/src/pages/ResourceCreation.js b/resq/frontend/src/pages/ResourceCreation.js
index 7a38c52f..17b3da52 100644
--- a/resq/frontend/src/pages/ResourceCreation.js
+++ b/resq/frontend/src/pages/ResourceCreation.js
@@ -11,11 +11,11 @@ import StepLabel from '@mui/material/StepLabel';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import ResourceAddress from '../components/ResourceAddress';
-import ResourceDetail1 from '../components/ResourceDetail1';
-import ResourceDetail2 from '../components/ResourceDetail2';
+import ResourceAddress from '../components/Resource/ResourceAddress';
+import ResourceDetail1 from '../components/Resource/ResourceDetail1';
+import ResourceDetail2 from '../components/Resource/ResourceDetail2';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { ResourceProvider } from '../components/ResourceContext';
+import { ResourceProvider } from '../components/Resource/ResourceContext';
 import { useResource } from './ResourceContext';
 import axios from 'axios';