diff --git a/src/App.js b/src/App.js
index ef8b3957e5e929eecd058a99cebb055e34d911c7..8e4f5e09cab2e76790e166b8d2d37894890eeb40 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
-import { fetch_user } from './util/prerender';
-import { Provider } from 'react-redux';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Home from './components/Home/Home'
-import Navbar from './components/Navbar/Navbar';
-import SignUp from './pages/SignUp/SignUp';
-import Login from './pages/Login/Login';
-import store from './store';
-import { useState } from 'react';
+import logo from "./logo.svg";
+import "./App.css";
+import { fetch_user } from "./util/prerender";
+import { Provider } from "react-redux";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Home from "./components/Home/Home";
+import Navbar from "./components/Navbar/Navbar";
+import SignUp from "./pages/SignUp/SignUp";
+import Login from "./pages/Login/Login";
+import store from "./store";
+import { useState } from "react";
 
 function App() {
   const [loading, setLoading] = useState(true);
@@ -17,13 +17,13 @@ function App() {
   return (
     <Provider store={store}>
       <Router>
-        <div className='App'>
-          <Navbar/>
-          <div className='content'>
+        <div className="App">
+          <Navbar />
+          <div className="content">
             <Routes>
-              <Route path='/' element={<Home/>} />
-              <Route path='/signup' element={<SignUp/>} />
-              <Route path='/login' element={<Login/>} />
+              <Route path="/" element={<Home />} />
+              <Route path="/signup" element={<SignUp />} />
+              <Route path="/login" element={<Login />} />
             </Routes>
           </div>
         </div>
diff --git a/src/components/NotificationBell/NotificationBell.js b/src/components/NotificationBell/NotificationBell.js
index 96aec020802d0b109358a8aa11526f7ad7f87d48..4705a2392cf0eac652d2db0aecb9fe51c2e80c4c 100644
--- a/src/components/NotificationBell/NotificationBell.js
+++ b/src/components/NotificationBell/NotificationBell.js
@@ -1,85 +1,104 @@
-import React, { useState } from 'react';
-import './NotificationBell.css';
-import Notification from './Notification.svg';
-import Stomp from 'stompjs'
-import { connect } from 'react-redux';
-import { load_user as handleLoadUser } from '../../actions/auth';
-import axios from 'axios';
+import React, { useState } from "react";
+import "./NotificationBell.css";
+import Notification from "./Notification.svg";
+import Stomp from "stompjs";
+import { connect } from "react-redux";
+import { load_user as handleLoadUser } from "../../actions/auth";
+import axios from "axios";
 
 const NotificationBell = React.memo(({ user, isAuthenticated, load_user }) => {
+  const [notificationCount, setNotificationCount] = useState(0);
+  const [showNotificationBox, setShowNotificationBox] = useState(false);
+  const [itemList, setItemList] = useState([]);
 
-    const [notificationCount, setNotificationCount] = useState(0);
-    const [showNotificationBox, setShowNotificationBox] = useState(false);
-    const [itemList, setItemList] = useState([]);
-
-    const createWebSocket = async (queue) => {
-        var connect_callback = function () {
-            console.log('connected websocket!');
-        };
-        var error_callback = function (error) {
-            console.log('unable to connect to websocket.');
-            console.log(error);
-        };
-        var url = "ws://34.69.147.3:15674/ws";
-        var wss = new WebSocket(url);
-        var client = Stomp.over(wss);
-        client.connect('admin', 'adminadmin', connect_callback, error_callback, '/');
-        setTimeout(() => {
-            client.subscribe(`/queue/${queue}`, maessageCallBack);
-        }, 5000)
-
-
-        const maessageCallBack = function (message) {
-            if (message.body) {
-                itemList.push(message)
-                setItemList(itemList);
-                setNotificationCount(notificationCount + 1);
-            }
-        }
-    }
+  const createWebSocket = async (queue) => {
+    var connect_callback = function () {
+      console.log("connected websocket!");
+    };
+    var error_callback = function (error) {
+      console.log("unable to connect to websocket.");
+      console.log(error);
+    };
+    var url = "ws://34.69.147.3:15674/ws";
+    var wss = new WebSocket(url);
+    var client = Stomp.over(wss);
+    client.connect(
+      "admin",
+      "adminadmin",
+      connect_callback,
+      error_callback,
+      "/"
+    );
+    setTimeout(() => {
+      client.subscribe(`/queue/${queue}`, maessageCallBack);
+    }, 5000);
 
-    const config = {
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `JWT ${localStorage.getItem('access')}`,
-            'Accept': 'application/json'
-        }
+    const maessageCallBack = function (message) {
+      if (message.body) {
+        itemList.push(message);
+        itemList.push(message.body);
+        setItemList(itemList);
+        setNotificationCount(notificationCount + 1);
+      }
     };
+  };
+
+  const config = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `JWT ${localStorage.getItem("access")}`,
+      Accept: "application/json",
+    },
+  };
 
-    const getUser = async () => {
-        let res = await axios.get(`${process.env.REACT_APP_BACKEND_API_URL}/api/create-user/`, config)
-        return res
-    }
-    // Create web socket
-    console.log(getUser().then((result) => { createWebSocket(result.data[0].username); }))
+  const getUser = async () => {
+    let res = await axios.get(
+      `${process.env.REACT_APP_BACKEND_API_URL}/api/create-user/`,
+      config
+    );
+    return res;
+  };
+  // Create web socket
+  console.log(
+    getUser().then((result) => {
+      createWebSocket(result.data[0].username);
+    })
+  );
 
-    function handleClickNotif() {
-        setNotificationCount(0);
-        setShowNotificationBox(!showNotificationBox);
-    }
+  function handleClickNotif() {
+    setNotificationCount(0);
+    setShowNotificationBox(!showNotificationBox);
+  }
 
-    return (
-        <div className='remindme-notification-bell'>
-            <button onClick={handleClickNotif}>
-                <img src={Notification} alt="Notification Bell" />
-                <div id="notification-count">{notificationCount}</div>
-            </button>
-            <div id="remindme-notification-box" style={{ display: showNotificationBox ? 'block' : 'none' }}>
-                <ul>
-                    {itemList.length != 0 ? itemList.map(item => (
-                        <li>{item}</li>
-                    )) : <p>There is no item to be reminded!</p>}
-                    {/* <li>Minum air putih biar sehat!</li>
+  return (
+    <div className="remindme-notification-bell">
+      <button onClick={handleClickNotif}>
+        <img src={Notification} alt="Notification Bell" />
+        <div id="notification-count">{notificationCount}</div>
+      </button>
+      <div
+        id="remindme-notification-box"
+        style={{ display: showNotificationBox ? "block" : "none" }}
+      >
+        <ul>
+          {itemList.length != 0 ? (
+            itemList.map((item) => <li>{item}</li>)
+          ) : (
+            <p>There is no item to be reminded!</p>
+          )}
+          {/* <li>Minum air putih biar sehat!</li>
                     <li>Kasih makan doggy</li> */}
-                </ul>
-            </div>
-        </div>
-    )
+        </ul>
+      </div>
+    </div>
+  );
 });
 
 const mapStateToProps = (state) => ({
-    isAuthenticated: state.auth.isAuthenticated,
-    user: state.auth.user
-})
+  isAuthenticated: state.auth.isAuthenticated,
+  user: state.auth.user,
+});
 
-export default connect(mapStateToProps, { load_user: handleLoadUser })(NotificationBell);
\ No newline at end of file
+export default connect(mapStateToProps, { load_user: handleLoadUser })(
+  NotificationBell
+);