diff --git a/my-app/src/components/navbar/MobileNavbar.jsx b/my-app/src/components/navbar/MobileNavbar.jsx
index 48fa389..a07f561 100644
--- a/my-app/src/components/navbar/MobileNavbar.jsx
+++ b/my-app/src/components/navbar/MobileNavbar.jsx
@@ -1,40 +1,31 @@
-import Link from 'next/link';
-import styles from '../navbar/styles/MobileNavbar.module.css';
+import Link from "next/link";
 // import { useSession } from 'next-auth/react';
 
+// TODO: use "active" class to highlight current page
+// TODO: update links
 const MobileNavbar = () => {
   return (
-    <div className={styles.mobileFooterStyle}>
-      <ul className='flex'>
-        <li className='flex-1 mr-2'>
-          <Link
-            href='/'
-            className='text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4'>
-            HOME
-          </Link>
-        </li>
-        <li className='flex-1 mr-2'>
-          <a
-            className='text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4'
-            href='#'>
-            REPORT
-          </a>
-        </li>
-        <li className='flex-1 mr-2'>
-          <a
-            className='text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4'
-            href='#'>
-            DATA
-          </a>
-        </li>
-        <li className='flex-1 mr-2'>
-          <a
-            className='text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4'
-            href='#'>
-            LOGIN
-          </a>
-        </li>
-      </ul>
+    <div className="btm-nav lg:hidden">
+      <Link href="/home">
+        <button>
+          <span className="btm-nav-label">Home</span>
+        </button>
+      </Link>
+      <Link href="/report">
+        <button>
+          <span className="btm-nav-label">Report</span>
+        </button>
+      </Link>
+      <Link href="/data">
+        <button>
+          <span className="btm-nav-label">Data</span>
+        </button>
+      </Link>
+      <Link href="/login">
+        <button>
+          <span className="btm-nav-label">Login</span>
+        </button>
+      </Link>
     </div>
   );
 };
diff --git a/my-app/src/components/navbar/styles/MobileNavbar.module.css b/my-app/src/components/navbar/styles/MobileNavbar.module.css
deleted file mode 100644
index 5871fe5..0000000
--- a/my-app/src/components/navbar/styles/MobileNavbar.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.mobileFooterStyle {
-  display: none;
-}
-
-@media screen and (max-width: 600px) {
-  .mobileFooterStyle {
-    display: inline;
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-    z-index: 100;
-  }
-}