diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index f89f1076aaa3e0e65df3e54e0ed0726c40f30b3e..76469561353e48d7a4f9f734a1073d0df023e8a5 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -53,4 +53,4 @@ export default function NavBar() {
       </Nav>
     </Navbar>
     );
-    }
+}
diff --git a/src/components/ShowTokenButton.js b/src/components/ShowTokenButton.js
index f980328fa8311fe6012e2c5b02db0e7ac5ef346d..6d22096b7284af88d78013a4ecc4bb1d376c17e9 100644
--- a/src/components/ShowTokenButton.js
+++ b/src/components/ShowTokenButton.js
@@ -1,30 +1,20 @@
-import React, { useContext, useState, useRef } from "react";
+import React, { useContext, useState, useRef, useEffect } from "react";
 import { Button, Modal, Form, FormControl } from "react-bootstrap";
 import { GlobalContext } from "../contexts/GlobalContext";
 import { getTokenIcon, getOKIcon, getCopyIcon } from "../utils/styling";
 
 export default function ShowTokenButton(props) {
-    const { api_host, idToken, accessToken, isAuthenticated } = useContext(GlobalContext);
+    const { accessToken, tokenExpiration, isAuthenticated } = useContext(GlobalContext);
     const [show, setShow] = useState(false);
+    const [timer, setTimer] = useState(undefined)
 
-    const [copySuccess, setCopySuccess] = useState('');
-    const textAreaRef = useRef(null);
     const textAreaRef2 = useRef(null);
-
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
 
-    function copyToClipboard(e) {
-        textAreaRef.current.select();
-        document.execCommand('copy');
-        // This is just personal preference.
-        // I prefer to not show the the whole text area selected.
-        e.target.focus();
-
-        setShow(false)
-    };
 
     function copyToClipboard2(e) {
+
         textAreaRef2.current.select();
         document.execCommand('copy');
         // This is just personal preference.
@@ -39,25 +29,9 @@ export default function ShowTokenButton(props) {
 
     if (isAuthenticated)  {
 
-        let renderIdToken = <div>
-            <Modal.Header closeButton>
-                <Modal.Title>{getTokenIcon('black')}{' '}oidc_id_token</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-                <Form.Control as="textarea" rows={11} ref={textAreaRef} value={idToken}>
-                    {idToken}
-                </Form.Control>
-            </Modal.Body>
-            <Modal.Footer>
-                <Button variant="primary" onClick={copyToClipboard}>
-                    {getCopyIcon()}{' '}Copy to Clipboard
-                </Button>
-            </Modal.Footer>
-        </div>
-
         let renderAccessToken = <div>
             <Modal.Header closeButton>
-                <Modal.Title>{getTokenIcon('black')}{' '}access_token</Modal.Title>
+                <Modal.Title>{getTokenIcon('black')}{' '}access_token expires at: {tokenExpiration}</Modal.Title>
             </Modal.Header>
             <Modal.Body>
                 <Form.Control as="textarea" rows={9} ref={textAreaRef2} value={accessToken}>
@@ -78,7 +52,7 @@ export default function ShowTokenButton(props) {
                 variant="outline-primary"
                 onClick={handleShow}
                 {...props}>
-                {getTokenIcon('white')}
+                {getTokenIcon('white')}&nbsp;
             </Button>
 
             <Modal size="lg" show={show} onHide={handleClose}>
diff --git a/src/components/basket/MyBasketButton.js b/src/components/basket/MyBasketButton.js
index 2c525a86cee5910487b9f646dc9c1ffae3228f66..a69e85a5038c0eca7149b2b40765c1dcd254cb3b 100644
--- a/src/components/basket/MyBasketButton.js
+++ b/src/components/basket/MyBasketButton.js
@@ -9,6 +9,7 @@ export default function MyBasketButton(props) {
     const { api_host, isAuthenticated } = useContext(GlobalContext);
     const basketContext = useContext(BasketContext);
     const { datasets, hasChanged } = useContext(BasketContext);
+
     useEffect(() => {
         loadBasket(basketContext, api_host, isAuthenticated)
     },[isAuthenticated])
diff --git a/src/contexts/GlobalContext.js b/src/contexts/GlobalContext.js
index 3be75b913464f8fd5a31622d6d4110a867be8a7e..3aad78ae4f75ee600e34844545b2105edb90b436 100644
--- a/src/contexts/GlobalContext.js
+++ b/src/contexts/GlobalContext.js
@@ -10,6 +10,8 @@ function setProfileState(api_host,
                          setLoggedInUserName,
                          setIdToken,
                          setAccessToken,
+                         setTokenExpiration,
+                         setSecondsLeft,
                          setIsAuthenticated){
     const profileUrl = api_host + "accounts/user-profiles/";
     axios
@@ -18,8 +20,14 @@ function setProfileState(api_host,
         setLoggedInUserName(response.data.results[0].full_name);
         setIdToken(response.data.results[0].oidc_id_token)
         setAccessToken(response.data.results[0].oidc_access_token)
+
+        let tokenExpiration = response.data.results[0].id_token_expiration
+        setTokenExpiration(tokenExpiration)
+
         localStorage.setItem('esap_logged_in', true)
         setIsAuthenticated(true);
+
+
     })
 
     .catch((error) => {
@@ -45,6 +53,8 @@ export function GlobalContextProvider({ children }) {
     const [loggedInUserName, setLoggedInUserName] = useState();
     const [idToken, setIdToken] = useState([]);
     const [accessToken, setAccessToken] = useState([]);
+    const [tokenExpiration, setTokenExpiration] = useState([]);
+    const [secondsLeft, setSecondsLeft] = useState(undefined)
 
     useEffect(() => {
     axios
@@ -66,7 +76,7 @@ export function GlobalContextProvider({ children }) {
     console.log("waah", sessionid, getCookie("sessionid"), document.cookie);
 
     const [isAuthenticated, setIsAuthenticated] = useState(
-    sessionid ? true : false
+        sessionid ? true : false
     );
 
     const handleLogin = ({ history }) => {
@@ -78,8 +88,9 @@ export function GlobalContextProvider({ children }) {
           setLoggedInUserName,
           setIdToken,
           setAccessToken,
+          setTokenExpiration,
+          setSecondsLeft,
           setIsAuthenticated);
-
       return null;
     };
 
@@ -129,6 +140,9 @@ export function GlobalContextProvider({ children }) {
           loggedInUserName,
           idToken,
           accessToken,
+          tokenExpiration,
+          secondsLeft,
+          setSecondsLeft,
           refreshLogin
       }}
     >
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
index 9c3bf8887324cebd37fb95057619c9d26d4b60c8..9218e69630cf1c8af7a2ba2b030d9c893a8d7e2b 100644
--- a/src/routes/Routes.js
+++ b/src/routes/Routes.js
@@ -72,7 +72,7 @@ export default function Routes() {
 
         </Switch>
 
-      <footer><small>esap-gui version 16 jul 2021 - 9:00</small></footer>
+      <footer><small>esap-gui version 20 jul 2021 - 11:00</small></footer>
     </Router>
   );
 }
diff --git a/src/utils/ShowTimeLeft.js b/src/utils/ShowTimeLeft.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ce85680b97650b23b15b8b1832b603f8a6e4ffb
--- /dev/null
+++ b/src/utils/ShowTimeLeft.js
@@ -0,0 +1,31 @@
+import React, { useContext, useState, useRef, useEffect } from "react";
+import { GlobalContext } from "../contexts/GlobalContext";
+
+export function ShowTimeLeft() {
+    const { tokenExpiration } = useContext(GlobalContext);
+    const [timer, setTimer] = useState(undefined)
+    const [secondsLeft, setSecondsLeft] = useState(undefined)
+
+    useEffect(() => {
+            setTimer(setInterval(() => showTimeLeft(), 10000))
+
+            // this function is automatically called when the component unmounts
+            return function cleanup() {
+                clearInterval(timer);
+            }
+        },[]
+    );
+
+    function showTimeLeft() {
+        //console.log({tokenExpiration})
+        alert(tokenExpiration)
+        //let expiration = new Date(tokenExpiration)
+
+        setSecondsLeft(1)
+    }
+
+    alert('showtimeleft')
+
+    return (<h5>{secondsLeft}</h5>)
+
+}
\ No newline at end of file