diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx
index 311e7acc6..971c347d4 100644
--- a/packages/web/components/templates/Menu.tsx
+++ b/packages/web/components/templates/Menu.tsx
@@ -1,21 +1,50 @@
+import Link from 'next/link'
 import React, { ReactNode } from 'react'
+
 import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar'
 import 'react-pro-sidebar/dist/css/styles.css'
-
+import { styled } from '../tokens/stitches.config'
 //import { useRouter } from 'next/router'
+//const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
 
 export const Menubar = () => {
   return (
-    <>
-      <ProSidebar style={{display: 'inline-block'}}>
-        <Menu iconShape="square" popperArrow={true}>
-          <MenuItem>Home</MenuItem>
-            <MenuItem>Today</MenuItem>
-            <MenuItem>Read Later</MenuItem>
-            <MenuItem>Highlights</MenuItem>
-            <MenuItem>NewsLetters</MenuItem>
-        </Menu>
-      </ProSidebar>
-    </>
+    <ProSidebar
+      style={{
+        display: 'inline-block',
+        background: '$grayBgActive !important',
+      }}
+    >
+      <Menu iconShape="square" popperArrow={true}>
+        <MenuItem>
+          <Link passHref href={'/home'}>
+            Home
+          </Link>
+        </MenuItem>
+        <MenuItem>
+          <Link
+            passHref
+            href={'/today'}
+          >
+            Today
+          </Link>
+        </MenuItem>
+        <MenuItem>
+          <Link passHref href={'home?q=in%3Ainbox+-label%3ANewsletter'}>
+            Read Later
+          </Link>
+        </MenuItem>
+        <MenuItem>
+          <Link passHref href={'/home?q=type%3Ahighlights'}>
+            Highlights
+          </Link>
+        </MenuItem>
+        <MenuItem>
+          <Link passHref href={'/home?q=in%3Ainbox+label%3ANewsletter'}>
+            Newsletters
+          </Link>
+        </MenuItem>
+      </Menu>
+    </ProSidebar>
   )
 }