diff --git a/jam-ui/cypress/fixtures/people.json b/jam-ui/cypress/fixtures/people.json
index 1d757c630..a83b773dc 100644
--- a/jam-ui/cypress/fixtures/people.json
+++ b/jam-ui/cypress/fixtures/people.json
@@ -11,7 +11,7 @@
       "online": true,
       "musician": true,
       "photo_url": null,
-      "biography": "Biography of Test User1",
+      "biography": "Biography of Test User1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
       "full_score": null,
       "instruments": [
         { "instrument_id": "acoustic guitar", "description": "Acoustic Guitar", "proficiency_level": 3, "priority": 1 },
@@ -42,7 +42,7 @@
       "online": false,
       "musician": true,
       "photo_url": null,
-      "biography": "",
+      "biography": "Biography of Test User2.",
       "full_score": null,
       "instruments": [
         { "instrument_id": "acoustic guitar", "description": "Acoustic Guitar", "proficiency_level": 3, "priority": 1 }
diff --git a/jam-ui/cypress/integration/friends/friends-page.spec.js b/jam-ui/cypress/integration/friends/friends-page.spec.js
index 311b1d38c..f31d069f9 100644
--- a/jam-ui/cypress/integration/friends/friends-page.spec.js
+++ b/jam-ui/cypress/integration/friends/friends-page.spec.js
@@ -73,7 +73,7 @@ describe('Friends page with data', () => {
       });
     };
 
-    const closeMoreDetailsSidePanel = () => {
+    const closeSidePanel = () => {
       cy.get('[data-testid=profileSidePanel] .modal-header button.close').click();
     };
 
@@ -86,7 +86,7 @@ describe('Friends page with data', () => {
       //open side panel by clicking name
       cy.contains('Test User1').click();
       showSidePanelContent();
-      closeMoreDetailsSidePanel();
+      closeSidePanel();
 
       //open side panel by clicking more button
       cy.get('[data-testid=peopleListTable] > tbody tr')
@@ -94,7 +94,7 @@ describe('Friends page with data', () => {
         .find('[data-testid=btnMore]')
         .click();
       showSidePanelContent();
-      closeMoreDetailsSidePanel();
+      closeSidePanel();
 
       //open side panel by clicking more link
       cy.get('[data-testid=peopleListTable] > tbody tr')
@@ -102,7 +102,7 @@ describe('Friends page with data', () => {
         .find('[data-testid=linkMore]')
         .click();
       showSidePanelContent();
-      closeMoreDetailsSidePanel();
+      closeSidePanel();
     });
   });
 
diff --git a/jam-ui/cypress/support/commands.js b/jam-ui/cypress/support/commands.js
index 27e4c5b46..a9ff6d67c 100644
--- a/jam-ui/cypress/support/commands.js
+++ b/jam-ui/cypress/support/commands.js
@@ -25,8 +25,6 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 
-import {createTextMessage} from '../../src/helpers/rest'
-
 Cypress.Commands.add('stubAuthenticate', (attrs = {}) => {
   const defaultAttrs = {
     id: '1',
diff --git a/jam-ui/cypress/support/index.js b/jam-ui/cypress/support/index.js
index 68820e35b..4c0cb055a 100644
--- a/jam-ui/cypress/support/index.js
+++ b/jam-ui/cypress/support/index.js
@@ -16,7 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
diff --git a/jam-ui/src/components/common/JKTooltip.js b/jam-ui/src/components/common/JKTooltip.js
index 72c533388..328f29d34 100644
--- a/jam-ui/src/components/common/JKTooltip.js
+++ b/jam-ui/src/components/common/JKTooltip.js
@@ -7,8 +7,9 @@ const JKTooltip = props => {
   const toggle = () => setTooltipOpen(!tooltipOpen);
 
   return (
-    <a href="#">
+    <a href="javascript: void(0);">
       <img
+        alt="help"
         ref={iconRef}
         src={require('../../assets/img/icons/question_icon.svg')}
         height="12"
diff --git a/jam-ui/src/components/navbar/JKNavbarTop.js b/jam-ui/src/components/navbar/JKNavbarTop.js
index fe53493bb..923b2f663 100644
--- a/jam-ui/src/components/navbar/JKNavbarTop.js
+++ b/jam-ui/src/components/navbar/JKNavbarTop.js
@@ -1,13 +1,10 @@
 import React, { useContext } from 'react';
-import { Collapse, Navbar, NavItem, Nav } from 'reactstrap';
+import { Navbar } from 'reactstrap';
 import classNames from 'classnames';
 import AppContext from '../../context/Context';
 import Logo from './Logo';
-//import SearchBox from './SearchBox';
 import TopNavRightSideNavItem from './JKTopNavRightSideNavItem';
-//import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
 import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
-//import autoCompleteInitialItem from '../../data/autocomplete/autocomplete';
 
 const JKNavbarTop = () => {
   const {
diff --git a/jam-ui/src/components/navbar/JKNavbarVertical.js b/jam-ui/src/components/navbar/JKNavbarVertical.js
index c02129cf3..e48cd8322 100644
--- a/jam-ui/src/components/navbar/JKNavbarVertical.js
+++ b/jam-ui/src/components/navbar/JKNavbarVertical.js
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import is from 'is_js';
 import PropTypes from 'prop-types';
 import React, { useContext, useEffect, useRef } from 'react';
-import { Button, Collapse, Nav, Navbar } from 'reactstrap';
+import { Collapse, Nav, Navbar } from 'reactstrap';
 import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
 import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
 import AppContext from '../../context/Context';
@@ -11,7 +11,7 @@ import Flex from '../common/Flex';
 import Logo from './Logo';
 import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
 import NavbarVerticalMenu from './NavbarVerticalMenu';
-import ToggleButton from './ToggleButton';
+//import ToggleButton from './ToggleButton';
 
 const JKNavbarVertical = ({ navbarStyle }) => {
   const navBarRef = useRef(null);
diff --git a/jam-ui/src/components/navbar/JKNotificationDropdown.js b/jam-ui/src/components/navbar/JKNotificationDropdown.js
index cdb6172d9..05f815ce3 100644
--- a/jam-ui/src/components/navbar/JKNotificationDropdown.js
+++ b/jam-ui/src/components/navbar/JKNotificationDropdown.js
@@ -1,13 +1,11 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import ListGroup from 'reactstrap/es/ListGroup';
 import ListGroupItem from 'reactstrap/es/ListGroupItem';
-//import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification';
 import { isIterableArray } from '../../helpers/utils';
-//import useFakeFetch from '../../hooks/useFakeFetch';
 import FalconCardHeader from '../common/FalconCardHeader';
 import Notification from '../notification/JKNotification';
 
@@ -20,12 +18,9 @@ const JKNotificationDropdown = () => {
   const dispatch = useDispatch();
   const notifications = useSelector(state => state.notification.notifications.slice(0, 5));
 
-  const LIMIT = 20;
+  const LIMIT = 5;
   const [page, setPage] = useState(0);
 
-  // State
-  //const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications);
-  //const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications);
   const [isOpen, setIsOpen] = useState(false);
   const [isAllRead, setIsAllRead] = useState(false);
 
@@ -35,32 +30,6 @@ const JKNotificationDropdown = () => {
     setIsOpen(!isOpen);
   };
 
-  // const markAsRead = e => {
-  //   e.preventDefault();
-  //   const updatedNewNotifications = newNotifications.map(notification => {
-  //     if (notification.hasOwnProperty('unread')) {
-  //       return {
-  //         ...notification,
-  //         unread: false
-  //       };
-  //     }
-  //     return notification;
-  //   });
-  //   const updatedEarlierNotifications = earlierNotifications.map(notification => {
-  //     if (notification.hasOwnProperty('unread')) {
-  //       return {
-  //         ...notification,
-  //         unread: false
-  //       };
-  //     }
-  //     setIsAllRead(true);
-  //     return notification;
-  //   });
-
-  //   setNewNotifications(updatedNewNotifications);
-  //   setEarlierNotifications(updatedEarlierNotifications);
-  // };
-
   const loadNotifications = async () => {
     try {
       const options = {
@@ -69,7 +38,7 @@ const JKNotificationDropdown = () => {
         limit: LIMIT
       };
       await dispatch(fetchNotifications(options)).unwrap();
-      console.log('NOTIFICATIONS', notifications);
+      //console.log('NOTIFICATIONS', notifications);
       //setPage(prev => prev + 1);
     } catch (error) {
       console.log(error);
diff --git a/jam-ui/src/components/navbar/JKProfileDropdown.js b/jam-ui/src/components/navbar/JKProfileDropdown.js
index fa7a104a9..338883d67 100644
--- a/jam-ui/src/components/navbar/JKProfileDropdown.js
+++ b/jam-ui/src/components/navbar/JKProfileDropdown.js
@@ -1,6 +1,5 @@
 //import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
 import { useAuth } from '../../context/AuthContext';
 import JKProfileAvatar from '../profile/JKProfileAvatar';
diff --git a/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js b/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js
index bd1c1ce5f..2bd2360cf 100644
--- a/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js
+++ b/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js
@@ -3,13 +3,13 @@ import { Nav, NavItem, NavLink, UncontrolledTooltip, NavbarText } from 'reactstr
 import ProfileDropdown from './JKProfileDropdown';
 import NotificationDropdown from './JKNotificationDropdown';
 //import SettingsAnimatedIcon from './SettingsAnimatedIcon';
-import CartNotification from './CartNotification';
+//import CartNotification from './CartNotification';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
 import AppContext from '../../context/Context';
 import classNames from 'classnames';
 import { navbarBreakPoint } from '../../config';
-import { useSelector } from 'react-redux';
+//import { useSelector } from 'react-redux';
 
 const TopNavRightSideNavItem = () => {
 
diff --git a/jam-ui/src/components/notification/JKNotification.js b/jam-ui/src/components/notification/JKNotification.js
index d0b7920f0..bbd503d9b 100644
--- a/jam-ui/src/components/notification/JKNotification.js
+++ b/jam-ui/src/components/notification/JKNotification.js
@@ -46,39 +46,21 @@ function JKNotification(props) {
     switch (description) {
       case NOTIFICATION_TYPES.TEXT_MESSAGE:
         return <TextMessageNotification notification={props.notification } handleOnAccept={handleOnAccept} />;
-        break;
       case NOTIFICATION_TYPES.FRIEND_REQUEST:
         return <JKFriendRequestNotification notification={props.notification} handleOnAccept={handleOnAccept} />;
-        break;
-
       default:
         return <JKGenericNotification {...props.notification} />;
-        break;
     }
   };
 
   return (<a className={classNames('notification', props.classNames) }>{render()}</a>);
 
-  // <Link className={classNames('notification', { 'bg-200': unread, 'notification-flush': flush }, className)} to={to}>
-  //   {avatar && (
-  //     <div className="notification-avatar">
-  //       <Avatar {...avatar} className="mr-3" />
-  //     </div>
-  //   )}
-  //   <div className="notification-body">
-  //     <p className={emoji ? 'mb-1' : 'mb-0'} dangerouslySetInnerHTML={createMarkup(children)} />
-  //     <span className="notification-time">
-  //       {emoji && (
-  //         <span className="mr-1" role="img" aria-label="Emoji">
-  //           {emoji}
-  //         </span>
-  //       )}
-  //       {time}
-  //     </span>
-  //   </div>
-  // </Link>
 };
 
+JKNotification.propTypes = {
+  notification: PropTypes.object.isRequired
+}
+
 // JKNotification.propTypes = {
 //   // to: PropTypes.string.isRequired,
 //   // avatar: PropTypes.shape(Avatar.propTypes),
diff --git a/jam-ui/src/components/notification/JKTextMessageNotification.js b/jam-ui/src/components/notification/JKTextMessageNotification.js
index a1d4145ef..466f6b59d 100644
--- a/jam-ui/src/components/notification/JKTextMessageNotification.js
+++ b/jam-ui/src/components/notification/JKTextMessageNotification.js
@@ -1,51 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useAuth } from '../../context/AuthContext';
-
 import { useDispatch, useSelector } from 'react-redux';
-import { selectPersonById, fetchPerson, add as addPerson } from '../../store/features/peopleSlice';
+import { fetchPerson, add as addPerson } from '../../store/features/peopleSlice';
 import JKMessageButton from '../profile/JKMessageButton';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ProfileAvatar from '../profile/JKProfileAvatar';
 import TimeAgo from '../common/JKTimeAgo';
+import { truncate } from '../../helpers/utils';
 
 function JKTextMessageNotification(props) {
   const { source_user, source_user_id, message, created_at } = props.notification;
-  const handleOnAccept = props.handleOnAccept;
-  
+
   const { currentUser } = useAuth();
-  //const [user, setUser] = useState(null);
   const dispatch = useDispatch();
 
   const user = useSelector(state => state.people.people.find(person => person.id === source_user_id));
 
-  // const user = useSelector(selectPersonById)
-
-  const loadSourceUser = () => {
-    if (!user) {
-      dispatch(fetchPerson({ userId: source_user_id }))
-        .unwrap()
-        .then(resp => {
-          dispatch(addPerson(resp))
-        })
-        .catch(error => console.log(error));
-    }
-  };
-
   useEffect(() => {
-    loadSourceUser();
-    return () => {
-      //cleanup
-    };
+    dispatch(fetchPerson({ userId: source_user_id }))
   }, []);
 
-  const truncate = msg => {
-    if (msg.length <= 200) {
-      return msg;
-    } else {
-      return `${msg.substring(0, 200)}...`;
-    }
-  };
-
   return (
     <>
       <div className="notification-avatar mr-3">
@@ -53,7 +26,7 @@ function JKTextMessageNotification(props) {
       </div>
       <div className="notification-body">
         <p className="mb-1">
-          {source_user.name} said: {truncate(message)}
+          {source_user.name} said: {truncate(message, 120)}
         </p>
         <span className="notification-time">
           <TimeAgo date={created_at} />
diff --git a/jam-ui/src/components/page/JKNotifications.js b/jam-ui/src/components/page/JKNotifications.js
index e6ea0f2b6..59591f8b7 100644
--- a/jam-ui/src/components/page/JKNotifications.js
+++ b/jam-ui/src/components/page/JKNotifications.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { Alert, Card, CardBody, Col, Row } from 'reactstrap';
-import classNames from 'classnames';
 import JKNotification from '../notification/JKNotification';
 import FalconCardHeader from '../common/FalconCardHeader';
 import Loader from '../common/Loader';
diff --git a/jam-ui/src/components/page/JKPeople.js b/jam-ui/src/components/page/JKPeople.js
index 30ba27286..21f793ff5 100644
--- a/jam-ui/src/components/page/JKPeople.js
+++ b/jam-ui/src/components/page/JKPeople.js
@@ -30,22 +30,23 @@ const JKPeople = ({ className }) => {
         return;
       } 
       try {
+        console.log('BEFORE fetching people');
         dispatch(fetchPeople({ page }));
       } catch (error) {
         console.log('Error fetching people', error);
       }
     },
-    [page]
+    [page, totalPages, dispatch]
   );
 
   useEffect(() => {
     loadPeople();
   }, [page]);
 
-  useEffect(() => {
-    if (loadingStatus === 'succeeded' && peopleListRef.current && page !== 1) {
-    }
-  }, [loadingStatus]);
+  // useEffect(() => {
+  //   if (loadingStatus === 'succeeded' && peopleListRef.current && page !== 1) {
+  //   }
+  // }, [loadingStatus]);
 
   const goNextPage = () => {
     setPage(val => ++val);
diff --git a/jam-ui/src/components/page/JKPeopleList.js b/jam-ui/src/components/page/JKPeopleList.js
index 1a11be9c5..67d3d406a 100644
--- a/jam-ui/src/components/page/JKPeopleList.js
+++ b/jam-ui/src/components/page/JKPeopleList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Row, Col, Button } from 'reactstrap';
+import { Table } from 'reactstrap';
 import JKPerson from './JKPerson';
 import PropTypes from 'prop-types';
 
@@ -10,7 +10,7 @@ const JKPeopleList = ({ people }) => {
         <thead className="bg-200 text-900">
           <tr>
             <th scope="col">Name</th>
-            <th scope="col" style={{ minWidth: 250 }} className="d-none d-lg-block d-xl-none">
+            <th scope="col" style={{ minWidth: 250 }}>
               About
             </th>
             <th scope="col">Instruments</th>
@@ -20,7 +20,7 @@ const JKPeopleList = ({ people }) => {
         </thead>
         <tbody className="list">
           {people.map((person, index) => (
-            <tr className="align-middle" key={person.id}>
+            <tr className="align-middle" key={`people-list-item-${person.id}`}>
               <JKPerson person={person} viewMode="list" />
             </tr>
           ))}
diff --git a/jam-ui/src/components/page/JKPeopleSwiper.js b/jam-ui/src/components/page/JKPeopleSwiper.js
index 347e57a79..5377de029 100644
--- a/jam-ui/src/components/page/JKPeopleSwiper.js
+++ b/jam-ui/src/components/page/JKPeopleSwiper.js
@@ -43,7 +43,7 @@ const JKPeopleSwiper = ({ people, goNextPage }) => {
         }}
       >
         {people.map((person, index) => (
-          <SwiperSlide key={person.id}>
+          <SwiperSlide key={`people-swiper-item-${person.id}`}>
             <Card className="swiper-person-card">
               <CardHeader className="bg-200">
                 <div className="avatar avatar-xl d-inline-block me-2 mr-2">
diff --git a/jam-ui/src/components/page/JKPerson.js b/jam-ui/src/components/page/JKPerson.js
index 2788dff75..eb05ce111 100644
--- a/jam-ui/src/components/page/JKPerson.js
+++ b/jam-ui/src/components/page/JKPerson.js
@@ -1,8 +1,8 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Container } from 'reactstrap';
+import { Row, Col } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import avatar from '../../assets/img/team/avatar.png';
+//import avatar from '../../assets/img/team/avatar.png';
 import JKProfileSidePanel from '../profile/JKProfileSidePanel';
 import JKProfileAvatar from '../profile/JKProfileAvatar';
 import JKProfileInstrumentsList from '../profile/JKProfileInstrumentsList';
@@ -12,6 +12,7 @@ import JKMessageButton from '../profile/JKMessageButton';
 import JKLatencyBadge from '../profile/JKLatencyBadge';
 import JKLastActiveAgo from '../profile/JKLastActiveAgo';
 import { useAuth } from '../../context/AuthContext';
+import { truncate } from '../../helpers/utils';
 
 const JKPerson = props => {
   const { id, name, biography, photo_url, instruments, latency_data, last_active_timestamp } = props.person;
@@ -37,7 +38,8 @@ const JKPerson = props => {
       .catch(error => console.log(error));
   };
 
-  const toggleMoreDetails = () => {
+  const toggleMoreDetails = e => {
+    e.preventDefault();
     fetchPerson();
     setShowSidePanel(prev => !prev);
   };
@@ -46,7 +48,7 @@ const JKPerson = props => {
       {viewMode === 'list' ? (
         <>
           <td className="text-nowrap">
-            <a onClick={toggleMoreDetails} className="d-flex align-items-center mb-1 fs-0">
+            <a href="/#" onClick={toggleMoreDetails} className="d-flex align-items-center mb-1 fs-0">
               <div className="avatar avatar-xl">
                 <JKProfileAvatar url={photo_url} />
               </div>
@@ -62,10 +64,10 @@ const JKPerson = props => {
               <strong>Last Active:</strong> <JKLastActiveAgo timestamp={last_active_timestamp} />
             </div>
           </td>
-          <td className="d-none d-lg-block d-xl-none">
-            { biography }
-            { biography && biography.length > 0 && (
-              <a data-testid="linkMore" onClick={toggleMoreDetails}>
+          <td>
+            {truncate(biography, 200)}
+            {biography && biography.length > 200 && (
+              <a href="/#" data-testid="linkMore" onClick={toggleMoreDetails}>
                 {'  '} more »
               </a>
             )}
@@ -87,7 +89,7 @@ const JKPerson = props => {
               <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" />
             </JKMessageButton>
 
-            <a onClick={toggleMoreDetails} data-testid="btnMore">
+            <a href="/#" onClick={toggleMoreDetails} data-testid="btnMore">
               <span className="btn btn-primary fs--1 px-2 py-1" data-bs-toggle="tooltip" title="View Profile">
                 <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
               </span>
@@ -112,7 +114,7 @@ const JKPerson = props => {
           </Row>
           <Row className="d-block d-sm-none mt-3">
             <Col>
-            <h5>Instruments</h5>
+              <h5>Instruments</h5>
               <JKProfileInstrumentsList instruments={instruments} />
             </Col>
           </Row>
@@ -130,7 +132,7 @@ const JKPerson = props => {
             <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" />
           </JKMessageButton>
 
-          <a onClick={toggleMoreDetails} data-testid="btnMore">
+          <a href="/#" onClick={toggleMoreDetails} data-testid="btnMore">
             <span className="btn btn-primary fs--1 px-2 py-1" data-bs-toggle="tooltip" title="View Profile">
               <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
             </span>
@@ -145,15 +147,14 @@ const JKPerson = props => {
 JKPerson.propTypes = {
   person: PropTypes.object.isRequired,
   viewMode: PropTypes.string
-  //instruments: PropTypes.arrayOf(PropTypes.string)
 };
 
-const JKPersonAvator = ({ url }) => {
-  if (url) {
-    return <img className="avatar avatar-xl rounded-circle" src={url} />;
-  } else {
-    return <img className="avatar avatar-xl rounded-circle" src={avatar} />;
-  }
-};
+// const JKPersonAvator = ({ url }) => {
+//   if (url) {
+//     return <img className="avatar avatar-xl rounded-circle" src={url} />;
+//   } else {
+//     return <img className="avatar avatar-xl rounded-circle" src={avatar} />;
+//   }
+// };
 
 export default JKPerson;
diff --git a/jam-ui/src/components/profile/JKLatencyBadge.js b/jam-ui/src/components/profile/JKLatencyBadge.js
index f0700428f..4a0a35fa8 100644
--- a/jam-ui/src/components/profile/JKLatencyBadge.js
+++ b/jam-ui/src/components/profile/JKLatencyBadge.js
@@ -29,7 +29,7 @@ const JKLatencyBadge = ({ latencyData, showAll }) => {
     setLabel(lbl);
   };
 
-  const buildBadgeMarkup = () => {
+  useEffect(() => {
     if (latencyData) {
       setLatencyLabel(latencyData.ars_total_latency);
 
@@ -39,10 +39,6 @@ const JKLatencyBadge = ({ latencyData, showAll }) => {
         setLatencyInfo(`${latencyData.ars_total_latency}ms`);
       }
     }
-  };
-
-  useEffect(() => {
-    buildBadgeMarkup();
   }, [latencyData]);
 
   return (
diff --git a/jam-ui/src/components/profile/JKMessageButton.js b/jam-ui/src/components/profile/JKMessageButton.js
index c2245bfb9..f476dd759 100644
--- a/jam-ui/src/components/profile/JKMessageButton.js
+++ b/jam-ui/src/components/profile/JKMessageButton.js
@@ -11,16 +11,11 @@ const JKMessageButton = props => {
 
   const toggleTooltip = () => setTooltipOpen(!tooltipOpen);
 
-
   useEffect(() => {
     setIsFriend(user.is_friend);
     setPendingFriendRequest(user.pending_friend_request);
   }, [user]);
 
-  const buttonTitle = () => {
-    return isFriend ? 'Send friend request' : 'You can message this user once you are friends'
-  };
-
   return (
     <>
       <JKMessageModal show={showModal} setShow={setShowModal} user={user} currentUser={currentUser} />
diff --git a/jam-ui/src/components/profile/JKProfileInterests.js b/jam-ui/src/components/profile/JKProfileInterests.js
index a7ed7cc49..70d661fe5 100644
--- a/jam-ui/src/components/profile/JKProfileInterests.js
+++ b/jam-ui/src/components/profile/JKProfileInterests.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { titleize } from '../../helpers/utils';
 
 const JKProfileInterests = ({ user }) => {
@@ -20,7 +21,7 @@ const JKProfileInterests = ({ user }) => {
   var FREE_SESSION_GENRE_TYPE = 'free_sessions';
   var COWRITING_GENRE_TYPE = 'cowriting';
 
-  const init = () => {
+  useEffect(() => {
     if (user.paid_sessions) {
       const filteredGenres = genres.filter(genre => {
         return genre.player_type === USER_TYPE && genre.genre_type === PAID_SESSION_GENRE_TYPE;
@@ -55,10 +56,6 @@ const JKProfileInterests = ({ user }) => {
       });
       setVirtualBandSessionGenres(filteredGenres);
     }
-  };
-
-  useEffect(() => {
-    init();
   }, []);
 
   return (
@@ -77,6 +74,10 @@ const JKProfileInterests = ({ user }) => {
   );
 };
 
+JKProfileInterests.propTypes = {
+  user: PropTypes.object
+}
+
 const FreeSessionInterests = ({ genres }) => {
   const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
   
@@ -113,7 +114,9 @@ const TraditioalBandSessionInterests = ({ genres, commitment, touring }) => {
     "3": "2-3 times a week",
     "4": "4+ times a week"
   };
-  const canTour = touring ? "Yes" : (canTour === false ? "No" : 'Not specified')
+
+  let canTour = ''; 
+  canTour = touring ? "Yes" : (canTour === false ? "No" : 'Not specified')
 
   return (
     <div>
diff --git a/jam-ui/src/components/profile/JKProfileSidePanel.js b/jam-ui/src/components/profile/JKProfileSidePanel.js
index 36c6b354c..5aeaf094c 100644
--- a/jam-ui/src/components/profile/JKProfileSidePanel.js
+++ b/jam-ui/src/components/profile/JKProfileSidePanel.js
@@ -101,7 +101,7 @@ const JKProfileSidePanel = props => {
                   <h5>Bands</h5>
                   {user.bands.map(band => (
                     <p>
-                      <a key={band.id} href="#">
+                      <a key={band.id} href="/#">
                         {band.name}
                       </a>
                     </p>
@@ -144,7 +144,7 @@ const JKProfileSidePanel = props => {
                       </>
                     }
                   />{' '}
-                  <JKMessageButton currentUser={currentUser} user={user}>
+                  <JKMessageButton size="md" currentUser={currentUser} user={user}>
                     <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" /> Send Message
                   </JKMessageButton>
                 </div>
diff --git a/jam-ui/src/components/profile/JKProfileSkillLevel.js b/jam-ui/src/components/profile/JKProfileSkillLevel.js
index 08c6c45ac..9937f26b3 100644
--- a/jam-ui/src/components/profile/JKProfileSkillLevel.js
+++ b/jam-ui/src/components/profile/JKProfileSkillLevel.js
@@ -1,14 +1,17 @@
 import React from 'react'
 
-const JKProfileSkillLevel = ({skillLevel}) => {
+function JKProfileSkillLevel({skillLevel}) {
   const SKILL_LEVEL_MAP = {
     "1": "Amateur",
     "2": "Professional"
   };
-
   return (
-    skillLevel ? SKILL_LEVEL_MAP[skillLevel] : 'Not specified'
+    <span>
+      {
+        skillLevel ? SKILL_LEVEL_MAP[skillLevel] : 'Not specified'
+      }
+    </span>
   )
 }
 
-export default JKProfileSkillLevel
\ No newline at end of file
+export default JKProfileSkillLevel
diff --git a/jam-ui/src/helpers/utils.js b/jam-ui/src/helpers/utils.js
index cce1da7cf..cfaf5f2ef 100644
--- a/jam-ui/src/helpers/utils.js
+++ b/jam-ui/src/helpers/utils.js
@@ -187,6 +187,15 @@ export const titleize = (str) => {
   );
  }
 
+ export const truncate = (str, length=100) => {
+  if(!str) return;
+  if (str.length <= length) {
+    return str;
+  } else {
+    return `${str.substring(0, length)}...`;
+  }
+ }
+
 export const routesSlicer = ({ routes, columns = 3, rows }) => {
   const routesCollection = [];
   routes.map(route => {
diff --git a/jam-ui/src/hooks/useScript.js b/jam-ui/src/hooks/useScript.js
index 350450622..4f88e4a65 100644
--- a/jam-ui/src/hooks/useScript.js
+++ b/jam-ui/src/hooks/useScript.js
@@ -6,9 +6,9 @@ const useScript = (src, onloadHandler = () => {}) => {
     script.defer = false;
     document.body.appendChild(script);
     script.onload = onloadHandler;
-return () => {
+    return () => {
       document.body.removeChild(script);
-    }
-  }, [src]);
+    };
+  }, [src, onloadHandler]);
 };
-export default useScript;
\ No newline at end of file
+export default useScript;
diff --git a/jam-ui/src/layouts/JKDashboardLayout.js b/jam-ui/src/layouts/JKDashboardLayout.js
index 09c753e8f..bab03c258 100644
--- a/jam-ui/src/layouts/JKDashboardLayout.js
+++ b/jam-ui/src/layouts/JKDashboardLayout.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Route, Redirect } from 'react-router-dom';
+//import { Route, Redirect } from 'react-router-dom';
 
 import DashboardLoadingIndicator from '../components/dashboard/JKDashboardLoadingIndicator';
 import LoginRequest from '../components/auth/JKLoginRequest';
@@ -17,10 +17,10 @@ const AUTH_STAGES = {
 
 const DashboardLayout = ({ location }) => {
   
-  const { currentUser, setCurrentUser } = useAuth();
+  const { setCurrentUser } = useAuth();
   const [stage, setStage] = useState(AUTH_STAGES['loading']);
 
-  const fetchCurrentUser = () => {
+  useEffect(() => {
     getCurrentUser()
     .then(resp => {
       if (resp.ok) {
@@ -36,10 +36,6 @@ const DashboardLayout = ({ location }) => {
       setStage(AUTH_STAGES['unauthenticated']);
       console.log(error);
     });
-  };
-
-  useEffect(() => {
-    fetchCurrentUser();
   }, [location.pathname]);
 
   useEffect(() => {
@@ -56,20 +52,19 @@ const DashboardLayout = ({ location }) => {
   }
 };
 
-
-const ProtectedRoute = ({ component: Component, ...rest }) => {
-  const { currentUser } = useAuth();
-  return (
-    // Show the component only when the user is logged in
-    // Otherwise, redirect the user to /login page
-    <Route
-      {...rest}
-      render={props =>
-        currentUser ? <Component {...props} /> : <Redirect to={{ pathname: '/authentication/basic/start' }} />
-      }
-    />
-  );
-};
+// const ProtectedRoute = ({ component: Component, ...rest }) => {
+//   const { currentUser } = useAuth();
+//   return (
+//     // Show the component only when the user is logged in
+//     // Otherwise, redirect the user to /login page
+//     <Route
+//       {...rest}
+//       render={props =>
+//         currentUser ? <Component {...props} /> : <Redirect to={{ pathname: '/authentication/basic/start' }} />
+//       }
+//     />
+//   );
+// };
 
 DashboardLayout.propTypes = { location: PropTypes.object.isRequired };
 
diff --git a/jam-ui/src/store/features/notificationSlice.js b/jam-ui/src/store/features/notificationSlice.js
index 673801080..1b44d06d0 100644
--- a/jam-ui/src/store/features/notificationSlice.js
+++ b/jam-ui/src/store/features/notificationSlice.js
@@ -21,7 +21,7 @@ export const removeNotification = createAsyncThunk(
   async (options) => {
     const {userId, notificationId} = options
     const response = await deleteNotification(userId, notificationId)
-    if (response.status == 204) return {}
+    if (response.status === 204) return {}
     return response.json()
   }
 )
diff --git a/jam-ui/src/store/features/peopleSlice.js b/jam-ui/src/store/features/peopleSlice.js
index c42cd3146..073907405 100644
--- a/jam-ui/src/store/features/peopleSlice.js
+++ b/jam-ui/src/store/features/peopleSlice.js
@@ -23,6 +23,16 @@ export const fetchPerson = createAsyncThunk(
     const {userId} = options
     const response = await getPersonById(userId)
     return response.json()
+  },{
+    condition: (options, {getState, extra}) => {
+      const {people} = getState()
+      const {userId} = options
+      const person = people.people.find(person => person.id === userId)
+      console.log('fetchPerson Condition', person);
+      if(person){
+        return false;
+      }
+    }
   }
 )
 
@@ -63,6 +73,19 @@ export const peopleSlice = createSlice({
     .addCase(acceptFriendRequest.fulfilled, (state, action) => {
 
     })
+    .addCase(fetchPerson.fulfilled, (state, action) => {
+      const person = state.people.find(person => person.id === action.payload.id)
+      if(person){
+        const updated = {
+          ...person, 
+          ...action.payload
+        }
+        const objIndex = state.people.findIndex((p => p.id === updated.id));
+        state.people[objIndex] = updated
+      }else{
+        state.people.push(action.payload)
+      }
+    })
   }
 })