diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
index daa83d7..52f5931 100644
--- a/components/Navbar/Navbar.jsx
+++ b/components/Navbar/Navbar.jsx
@@ -1,14 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import style from './Navbar.module.css';
 import { Modal } from 'react-responsive-modal';
-import { FaTimes, FaUserCircle, FaCode } from 'react-icons/fa';
+import { FaTimes, FaUserCircle, FaCode, FaPowerOff } from 'react-icons/fa';
 import Login from '../homepage/Header/Login';
 import style_modal from '../../styles/Modal.module.css';
 import cookie from 'js-cookie';
 import Link from 'next/link';
 import Signup from '../homepage/Header/Signup';
 import { useSelector, useDispatch } from 'react-redux';
-import { FaPowerOff } from 'react-icons/fa';
 import { IoMdLogIn } from 'react-icons/io';
 import { AiFillHome, AiFillInfoCircle } from 'react-icons/ai';
 import { BsFillPeopleFill, BsFillMusicPlayerFill } from 'react-icons/bs';
@@ -159,13 +158,12 @@ const Navbar = () => {
         }
       >
         <Link scroll={true} href='/'>
-          <div className={style.neon}>VOVOCA</div>
+          <div className={style.neon__container}>
+            <span className={style.neon}>VOVOCA</span>
+          </div>
         </Link>
         <div className={style.nav__bar}>
           <ul className={style.nav__items}>
-            <Link scroll={true} href='/'>
-              <li className={style.list__items}>Home</li>
-            </Link>
             <Link scroll={true} href='/#about'>
               <li className={style.list__items}>About us</li>
             </Link>
@@ -183,11 +181,12 @@ const Navbar = () => {
               <li className={style.list__items}>Team</li>
             </Link>
             {authenticated.isAuthenticated === true ? (
-              <Link scroll={true} href='/dashboard'>
-                <button
-                  style={{ marginLeft: '25px', padding: '0.4em 1em' }}
-                  id='dashboard'
-                >
+              <Link
+                scroll={true}
+                href='/dashboard'
+                classNames={style.list__items}
+              >
+                <button style={{ padding: '0.4em 1em' }} id='dashboard'>
                   <p
                     htmlFor='dashboard'
                     style={{
@@ -198,7 +197,10 @@ const Navbar = () => {
                       alignItems: 'center',
                     }}
                   >
-                    <FaUserCircle style={{ marginRight: '10px' }} />
+                    <FaUserCircle
+                      className={style.dashboard__icon}
+                      style={{ marginRight: '10px' }}
+                    />
                     Dashboard
                   </p>
                 </button>
diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index a2c53c3..109f483 100644
--- a/components/Navbar/Navbar.module.css
+++ b/components/Navbar/Navbar.module.css
@@ -4,9 +4,14 @@
   font-size: 2vw;
   line-height: 2vw;
   text-shadow: 0 0 1vw #4ce2ec;
-  padding-top: 1.1em;
-  margin-left: 5%;
   cursor: pointer;
+  margin-left: 1rem;
+}
+
+.neon__container {
+  display:flex;
+  align-items: center;
+  height: 100%;
 }
 
 .neon {
@@ -14,17 +19,21 @@
   -moz-animation: neon 5s ease infinite;
   -webkit-animation: neon 5s ease infinite;
 }
+
+.nav__bar {
+  margin-right: 1rem;
+}
+
 .nav__items {
   list-style: none;
   display: flex;
-  margin: 30px;
   position: relative;
+  gap: 20px;
   z-index: 2;
 }
 .list__items {
   cursor: pointer;
   padding: 7px;
-  margin-left: 30px;
   font-weight: 500;
   color: #d7e1ec9a;
   transition: width 1ms ease-in-out, border-bottom 1s;
@@ -57,10 +66,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 75px !important;
+  /* height: 75px !important; */
   z-index: 100;
-  padding-top: 51px;
-  padding-bottom: 51px;
+  /* padding-top: 51px; */
+  /* padding-bottom: 51px; */
 }
 .scroll__header .neon{
   padding-top: unset;
@@ -69,12 +78,8 @@
 .mobile__header,.dashnav_mobile {
   display: none;
 }
-@media  (max-width: 1300px) {
-  .neon{
-    padding-top: 1.5em;
-  }
-}
-@media only screen and (max-width: 600px) {
+
+@media only screen and (max-width: 760px) {
   .navbar__box {
     display: none;
   }
@@ -158,4 +163,11 @@
       0 0 5vw #800e0b, 0 0 0.2vw #800e0b, 0.5vw 0.5vw 0.1vw #40340a;
     color: #ebc886;
   }
-}
\ No newline at end of file
+}
+
+/* Navbar rules for Tablet Mode */
+@media only screen and ( max-width: 898px) {
+  .dashboard__icon {
+    display: none;
+  }
+} 
\ No newline at end of file
diff --git a/pages/_app.js b/pages/_app.js
index 52656f9..aec9d4a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -9,14 +9,21 @@ import { Modal } from 'react-responsive-modal';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import ScrollButton from '../components/scrollToTop/ScrollButton';
+import { useRouter } from 'next/router';
 
-const Tablet = () => {
+// takes router as argument to get path or page name
+const Tablet = Router => {
   const isTablet = useMediaQuery({ minWidth: 601, maxWidth: 1226 });
-  return isTablet;
+  // only allows /developers route in tablet mode.
+  return isTablet && !(Router.pathname == '/developers');
 };
 const closeIcon = <svg style={{ display: 'none' }}></svg>;
+
 function MyApp({ Component, pageProps }) {
-  return Tablet() ? (
+  // useRouter for passing router object to tablet function on render.
+  const router = useRouter();
+
+  return Tablet(router) ? (
     <>
       <Modal open={true} onClose={false} center closeIcon={closeIcon}>
         <h2>This Web service is not available in Tablet mode :(</h2>
diff --git a/pages/developers.js b/pages/developers.js
index cfacafe..39d2867 100644
--- a/pages/developers.js
+++ b/pages/developers.js
@@ -1,4 +1,4 @@
-import styles from '../styles/Testimonial.module.css';
+import styles from '../styles/Developer.module.css';
 import Head from 'next/head';
 import { AiFillLinkedin } from 'react-icons/ai';
 import Link from 'next/link';
diff --git a/styles/Developer.module.css b/styles/Developer.module.css
new file mode 100644
index 0000000..31d022a
--- /dev/null
+++ b/styles/Developer.module.css
@@ -0,0 +1,139 @@
+.container {
+  width: 100%;
+  padding-right: 4rem;
+  padding-left: 4rem;
+  margin-bottom: 3em;
+  /* height: 100vh; */
+}
+
+.testimonial {
+  padding: 1rem;
+  flex-basis: 30rem;
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: column;
+}
+
+.testimonial__heading {
+  text-align: center;
+  font-size: 3rem;
+  color: #d7e1ec;
+}
+
+.testimonial__row__1 {
+  /* display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: masonry; */
+  display: flex;
+  justify-content: space-evenly;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.testimonial__row__2 {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.testimonial__row__2 .testimonial {
+  padding: 2rem;
+  flex-basis: auto;
+}
+
+.testimonial__article {
+  padding: 1.25rem;
+  border: 1px solid transparent;
+  border-radius: 1.25rem;
+  background-image: linear-gradient(
+      154deg,
+      #3a3e41 0%,
+      #2a2d30 49%,
+      #242628 100%
+    ),
+    linear-gradient(160deg, #434b54 1%, #2a2c2f 45%, #191b1e 75%);
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  box-shadow: 1.875rem 1.5625rem 1.375rem rgb(21 22 24 / 24%),
+    -4px -4px 15px rgb(195 200 205 / 4%);
+  display: flex;
+  flex: 1;
+}
+
+.testimonial__img {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.developer__img{
+  padding-left: 2rem;
+  padding-right: 1rem;
+  border-radius: 50%;
+  width: 4.75rem;
+  height: 3.25rem;
+  background: linear-gradient(-32deg, #1a1d21 3%, #393d42 44% 56%, #1a1d21 97%)
+    0% 0%/200% 200%;
+  box-shadow: 4px 4px 18px rgb(0 0 0 / 40%),
+    -4px -2px 16px rgb(195 200 205 / 8%);
+  margin: 5%;
+  object-fit: cover;
+}
+.contributor__img{
+  padding-left: 2rem;
+  padding-right: 1rem;
+  border-radius: 50%;
+  width: 4.75rem;
+  height: 4.5rem;
+  background: linear-gradient(-32deg, #1a1d21 3%, #393d42 44% 56%, #1a1d21 97%)
+    0% 0%/200% 200%;
+  box-shadow: 4px 4px 18px rgb(0 0 0 / 40%),
+    -4px -2px 16px rgb(195 200 205 / 8%);
+  margin: 5%;
+  object-fit: cover;
+}
+.testimonial__content > h5 {
+  color: #d7e1ec;
+  line-height: 1.7;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.testimonial__content > p {
+  color: #a0a1ac;
+}
+
+.testimonial__content > span {
+  color: #d7e1ec;
+}
+
+@media (min-width: 1300px) {
+  .testimonial{
+    padding: 0.5em;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .testimonial__row__1 {
+    display: block;
+  }
+  .testimonial{
+    padding: 1em;
+  }
+  /* .testimonial__row__2 {
+    display: block;
+  } */
+  .testimonial__content > p {
+    width: 105%;
+    margin-top: 5px;
+  }
+  .container {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .testimonial__heading {
+    font-size: 2rem;
+  }
+}