diff --git a/jam-ui/cypress/fixtures/person.json b/jam-ui/cypress/fixtures/person.json
index a39d09aaa..22a75e5f2 100644
--- a/jam-ui/cypress/fixtures/person.json
+++ b/jam-ui/cypress/fixtures/person.json
@@ -44,18 +44,28 @@
   "online_presences": [
     { "id": "e1962204-f652-41b0-84d6-1afd7e9172be", "service_type": "soundcloud", "username": "testuser" },
     { "id": "005a7c78-db8b-4f72-a51f-d64d579c22b0", "service_type": "reverbnation", "username": "testuser" },
-    { "id": "2dd22eef-03ba-4743-b65b-5a194591dc86", "service_type": "bandcamp", "username": "testuser" },
-    { "id": "d6ae62b4-e1ce-4cf0-90b7-c64033533261", "service_type": "fandalism", "username": "testuser" },
-    { "id": "c6e85453-0fa9-40d0-9754-8f372d6e0ed3", "service_type": "youtube", "username": "testuser" },
-    { "id": "480ec1ad-ea1d-4990-9c68-d7f9c0174441", "service_type": "facebook", "username": "testuser" },
-    { "id": "232b26d5-c75a-4d65-9013-a07b73c8a7ae", "service_type": "twitter", "username": "testuser" }
+    { "id": "2dd22eef-03ba-4743-b65b-5a194591dc86", "service_type": "bandcamp", "username": "testuser" }
   ],
   "performance_samples": [],
   "genres": [
     { "genre_id": "classical", "player_type": "JamRuby::User", "genre_type": "profile" },
     { "genre_id": "blues", "player_type": "JamRuby::User", "genre_type": "free_sessions" }
   ],
-  "bands": [],
+  "bands": [
+    { 
+      "id": "1",
+      "name": "The Band",
+      "admin": true,
+      "photo_url": "",
+      "logo_url": "",
+      "genres": [
+        {
+          "id": 1,
+          "name": "pop"
+        }
+      ]
+    }
+  ],
   "instruments": [
     { "description": "Acoustic Guitar", "proficiency_level": 3, "priority": 1, "instrument_id": "acoustic guitar" },
     { "description": "Keyboard", "proficiency_level": 3, "priority": 8, "instrument_id": "keyboard" }
diff --git a/jam-ui/cypress/fixtures/text_messages_page1.json b/jam-ui/cypress/fixtures/text_messages_page1.json
new file mode 100644
index 000000000..69d2638df
--- /dev/null
+++ b/jam-ui/cypress/fixtures/text_messages_page1.json
@@ -0,0 +1,152 @@
+[
+  {
+    "id": "1",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 1",
+    "created_at": "2021-09-20T15:15:15.970Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "2",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 2",
+    "created_at": "2021-09-20T15:14:48.821Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "3",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 3",
+    "created_at": "2021-09-20T15:13:02.367Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "4",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 4",
+    "created_at": "2021-09-18T21:39:58.493Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "5",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 5",
+    "created_at": "2021-09-18T21:37:29.752Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "6",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 6",
+    "created_at": "2021-09-18T21:37:22.319Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "7",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 7",
+    "created_at": "2021-09-18T21:37:12.366Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "8",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 8",
+    "created_at": "2021-09-18T21:23:50.070Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "9",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 9",
+    "created_at": "2021-09-18T21:23:45.271Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "10",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 10",
+    "created_at": "2021-09-18T21:23:07.918Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  }
+]
\ No newline at end of file
diff --git a/jam-ui/cypress/fixtures/text_messages_page2.json b/jam-ui/cypress/fixtures/text_messages_page2.json
new file mode 100644
index 000000000..94233ad00
--- /dev/null
+++ b/jam-ui/cypress/fixtures/text_messages_page2.json
@@ -0,0 +1,152 @@
+[
+  {
+    "id": "11",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 11",
+    "created_at": "2021-09-17T15:15:15.970Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "12",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 12",
+    "created_at": "2021-09-17T15:14:48.821Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "13",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 13",
+    "created_at": "2021-09-17T15:13:02.367Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "14",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 14",
+    "created_at": "2021-09-15T21:39:58.493Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "15",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 15",
+    "created_at": "2021-09-15T21:37:29.752Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "16",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 16",
+    "created_at": "2021-09-15T21:37:22.319Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "17",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 17",
+    "created_at": "2021-09-15T21:37:12.366Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "18",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 18",
+    "created_at": "2021-09-15T21:23:50.070Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "19",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 19",
+    "created_at": "2021-09-15T21:23:45.271Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "20",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 20",
+    "created_at": "2021-09-15T21:23:07.918Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  }
+]
\ No newline at end of file
diff --git a/jam-ui/cypress/fixtures/text_messages_page3.json b/jam-ui/cypress/fixtures/text_messages_page3.json
new file mode 100644
index 000000000..7c7642793
--- /dev/null
+++ b/jam-ui/cypress/fixtures/text_messages_page3.json
@@ -0,0 +1,152 @@
+[
+  {
+    "id": "21",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 21",
+    "created_at": "2021-09-14T15:15:15.970Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "22",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 22",
+    "created_at": "2021-09-14T15:14:48.821Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "23",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 23",
+    "created_at": "2021-09-17T12:13:02.367Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "24",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 24",
+    "created_at": "2021-09-12T21:39:58.493Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "25",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 25",
+    "created_at": "2021-09-12T21:37:29.752Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "26",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 26",
+    "created_at": "2021-09-12T21:37:22.319Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "27",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 27",
+    "created_at": "2021-09-12T21:37:12.366Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "28",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 28",
+    "created_at": "2021-09-12T21:23:50.070Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  },
+  {
+    "id": "29",
+    "source_user_id": "2",
+    "target_user_id": "1",
+    "message": "Test Message 29",
+    "created_at": "2021-09-12T21:23:45.271Z",
+    "source_user": {
+      "id": "2",
+      "name": "Test User2"
+    },
+    "target_user": {
+      "id": "1",
+      "name": "Test User1"
+    }
+  },
+  {
+    "id": "30",
+    "source_user_id": "1",
+    "target_user_id": "2",
+    "message": "Test Message 30",
+    "created_at": "2021-09-12T21:23:07.918Z",
+    "source_user": {
+      "id": "1",
+      "name": "Test User1"
+    },
+    "target_user": {
+      "id": "2",
+      "name": "Test User2"
+    }
+  }
+]
\ No newline at end of file
diff --git a/jam-ui/cypress/integration/friends/friends-list.spec.js b/jam-ui/cypress/integration/friends/friends-list.spec.js
index a7c9a75c8..aa11a53c3 100644
--- a/jam-ui/cypress/integration/friends/friends-list.spec.js
+++ b/jam-ui/cypress/integration/friends/friends-list.spec.js
@@ -2,7 +2,7 @@
 
 describe('Friends page', () => {
   beforeEach(() => {
-    cy.stubAuthenticate();
+    cy.stubAuthenticate({ id: '2'}); //currentUser id is 2 - people.yaml fixture
     cy.intercept('POST', /\S+\/filter/, { fixture: 'people' });
   });
 
@@ -11,7 +11,7 @@ describe('Friends page', () => {
       cy.visit('/friends');
     });
 
-    it('lists musicians', () => {
+    it('lists musician users', () => {
       cy.contains('Find New Friends').should('exist');
       cy.contains('Update Search').should('exist');
       cy.contains('Reset Filters').should('exist');
@@ -24,29 +24,45 @@ describe('Friends page', () => {
     //TODO: paginate
   });
 
-  describe('details side panel', () => {
+  describe.only('details side panel', () => {
     
     const showSidePanelContent = () => {
       cy.get('[data-testid=profileSidePanel] h4').should('have.text', 'Test User1')
-      cy.get('[data-testid=profileSidePanel]')
-        .should('be.visible')
-        .contains('Biography of Test User1')
-      
-      cy.get('[data-testid=profileSidePanel] .modal-body p')
-      .contains('Location: Denver, US')
-      .and('contain', 'Location: Denver, US')
-      .and('contain', 'Skill Level: Professional')
-      .and('contain', 'Joined JamKazam: 08-26-2021')
+      cy.get('[data-testid=profileSidePanel] .modal-body p').within(() => {
+        cy.contains('Location: Denver, US')
+        .and('contain', 'Location: Denver, US')
+        .and('contain', 'Skill Level: Professional')
+        .and('contain', 'Joined JamKazam: 08-26-2021')
+        .and('contain', 'Last Active:')
+        .and('contain', 'Latency to Me:')
+        cy.get('.latency-badge').contains('UNKNOWN')
+      })
 
-      //instruments
-      cy.get('[data-testid=profileSidePanel] .modal-body').contains('Acoustic Guitar: Expert')
-      cy.get('[data-testid=profileSidePanel] .modal-body').contains('Keyboard: Expert')
-      //genres
-      cy.get('[data-testid=profileSidePanel] .modal-body').contains('classical, blues')
+      cy.get('[data-testid=profileSidePanel] .modal-body').within(() => {
+        cy.get('[data-testid=biography]').contains('Biography of Test User1')
+
+        //instruments
+        cy.get('[data-testid=instruments]').contains('Acoustic Guitar: Expert')
+        cy.get('[data-testid=instruments]').contains('Keyboard: Expert')
+
+        //genres
+        cy.get('[data-testid=genres]').contains('classical, blues')
+
+        //bands
+        cy.get('[data-testid=bands]').contains('The Band')
+
+        //performance_samples
+        //cy.get('[data-testid=performance_samples]').contains('The Band')
+
+        //online presence
+        cy.get('[data-testid=online_presences]')
+        .contains('Soundcloud')
+        cy.get('[data-testid=online_presences]')
+        .contains('Reverbnation')
+
+        
+      })
 
-      
-      
-      
     }
 
     const closeMoreDetailsSidePanel = () => {
@@ -119,7 +135,100 @@ describe('Friends page', () => {
 
   })
 
-  describe('send message', () => {
+  describe('chat window', () => {
+    beforeEach(() => {
+      cy.visit('/friends');
+    });
+    
+    it('is not disabled for friends', () => {
+      cy.get('[data-testid=peopleListTable] > tbody tr')
+      .eq(0)
+      .find('[data-testid=message]').should('not.be.disabled').trigger('mouseover')
+      cy.contains('Send a message').should('exist')
+    })
+
+    it('is disabled for non friends', () => {
+      cy.get('[data-testid=peopleListTable] > tbody tr')
+      .eq(1)
+      .find('[data-testid=message]').should('be.disabled')
+      //cy.contains('You can message this user once you are friends').should('exist')
+    })
+
+    it('lists text messages', () => {
+      //initially show the most recent messages on openning chat window modal
+      let numberOfMessages = 10
+      cy.fixture('text_messages_page1').then((json) => {
+        cy.intercept('GET', /\S+\/text_messages\S+/, json).as('getTextMessages');
+      })
+      cy.get('[data-testid=peopleListTable] > tbody tr')
+      .eq(0)
+      .find('[data-testid=message]').click()
+      cy.wait('@getTextMessages')
+      cy.get('[data-testid=textMessageModal]').should('be.visible').within(() => {
+        cy.get('.text-message-row').should('have.length', numberOfMessages)
+       
+        //display previous messages by scrolling up
+        const messageFixtures = [
+          'text_messages_page2',
+          'text_messages_page3'
+        ]
+        // messageFixtures.forEach((fixture) => {
+        //   cy.fixture(fixture).then((json) => {
+        //     cy.intercept('GET', /\S+\/text_messages\S+/, json)
+        //     cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('bottom')
+        //     cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('top')
+        //     numberOfMessages = numberOfMessages + 10
+        //     cy.get('.text-message-row').should('have.length', numberOfMessages)
+        //   })
+        // })
+        
+        cy.get('button').contains('Close').should('not.be.disabled').click()
+
+      })
+      cy.get('[data-testid=textMessageModal]').should('not.be.visible')
+
+    })
+    
+    it('sends message by clicking send button', () => {
+      cy.get('[data-testid=peopleListTable] > tbody tr')
+      .eq(0)
+      .find('[data-testid=message]').click()
+      cy.get('[data-testid=textMessageModal]').within(() => {
+        cy.get('button').contains('Send').should('be.disabled')
+        cy.get('textarea').type('Hello')
+        cy.get('button').contains('Send').should('not.be.disabled').click()
+        cy.get('textarea').should('have.value', '')
+        cy.get('button').contains('Send').should('be.disabled')
+      })
+      
+    })
+
+    it('sends message by pressing enter key', () => {
+      cy.get('[data-testid=peopleListTable] > tbody tr')
+      .eq(0)
+      .find('[data-testid=message]').click()
+      cy.get('[data-testid=textMessageModal]').within(() => {
+        cy.get('button').contains('Send').should('be.disabled')
+        cy.get('textarea').type('Hello{enter}')
+        cy.get('textarea').should('have.value', '')
+        cy.get('button').contains('Send').should('be.disabled')
+      })
+    })
+
+    it('goes away by clicking close button', () => {
+      cy.get('[data-testid=peopleListTable] > tbody tr')
+      .eq(0)
+      .find('[data-testid=message]').click()
+      cy.get('[data-testid=textMessageModal]').within(() => {
+        cy.get('button').contains('Close').should('not.be.disabled').click()
+      })
+      cy.get('[data-testid=textMessageModal]').should('not.be.visible')
+    })
+
+    it.skip('shows received message by other user', () => {
+      //TODO: this should be test in e2e test (without faking backend api intractions)  
+    })
+
 
   })
 });
diff --git a/jam-ui/cypress/support/commands.js b/jam-ui/cypress/support/commands.js
index ae2950189..27e4c5b46 100644
--- a/jam-ui/cypress/support/commands.js
+++ b/jam-ui/cypress/support/commands.js
@@ -24,16 +24,23 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
-Cypress.Commands.add('stubAuthenticate', () => {
+
+import {createTextMessage} from '../../src/helpers/rest'
+
+Cypress.Commands.add('stubAuthenticate', (attrs = {}) => {
+  const defaultAttrs = {
+    id: '1',
+    first_name: 'Peter',
+    last_name: 'Pan',
+    name: 'Peter Pan',
+    photo_url: ''
+  }
+  const currentUserAtrs = {...defaultAttrs, ...attrs}
   cy.intercept('GET', `${Cypress.env('apiBaseUrl')}/me`, {
     statusCode: 200,
-    body: {
-      first_name: 'Peter',
-      last_name: 'Pan',
-      name: 'Peter Pan',
-      photo_url: ''
-    }
+    body: currentUserAtrs
   }).as('getCurrentUser')
+  
 });
 
 Cypress.Commands.add('stubUnauthenticate', () => {
diff --git a/jam-ui/src/components/profile/JKLatencyBadge.js b/jam-ui/src/components/profile/JKLatencyBadge.js
index 9b8c53b33..f0700428f 100644
--- a/jam-ui/src/components/profile/JKLatencyBadge.js
+++ b/jam-ui/src/components/profile/JKLatencyBadge.js
@@ -47,7 +47,7 @@ const JKLatencyBadge = ({ latencyData, showAll }) => {
 
   return (
     <>
-      {latencyInfo} <span className={`badge latency-${label.toLowerCase()}`}>{label}</span>
+      {latencyInfo} <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
     </>
   );
 };
diff --git a/jam-ui/src/components/profile/JKMessageButton.js b/jam-ui/src/components/profile/JKMessageButton.js
index 75ddb1249..ab28a5059 100644
--- a/jam-ui/src/components/profile/JKMessageButton.js
+++ b/jam-ui/src/components/profile/JKMessageButton.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { Button, Tooltip } from "reactstrap";
 import JKMessageModal from './JKMessageModal';
 
 const JKMessageButton = props => {
@@ -6,6 +7,10 @@ const JKMessageButton = props => {
   const [showModal, setShowModal] = useState(false);
   const [isFriend, setIsFriend] = useState(false);
   const [pendingFriendRequest, setPendingFriendRequest] = useState(false);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+
+  const toggleTooltip = () => setTooltipOpen(!tooltipOpen);
+
 
   useEffect(() => {
     setIsFriend(user.is_friend);
@@ -13,22 +18,34 @@ const JKMessageButton = props => {
   }, [user]);
 
   const buttonTitle = () => {
-    return isFriend ? 'Send friend request' : 'You can message this user once you are friends.'
+    return isFriend ? 'Send friend request' : 'You can message this user once you are friends'
   };
 
   return (
     <>
       <JKMessageModal show={showModal} setShow={setShowModal} user={user} currentUser={currentUser} />
-      <button
+      <Button
+        id={"text-message-user-" + user.id}
         onClick={() => setShowModal(!showModal)}
-        className={`btn btn-primary ${cssClasses}`}
-        title={buttonTitle()}
+        color="primary"
+        size='sm'
+        className={cssClasses}
+        //title={buttonTitle()}
         data-testid="message"
-        //disabled={!isFriend}
-        disabled={false}
+        disabled={!isFriend}
       >
         {children}
-      </button>
+      </Button>
+      <Tooltip
+        placement='top'
+        isOpen={tooltipOpen}
+        target={"text-message-user-" + user.id}
+        toggle={toggleTooltip}
+      >
+        {
+          isFriend ? 'Send a message' : 'You can message this user once you are friends'
+        }
+      </Tooltip>
     </>
   );
 };
diff --git a/jam-ui/src/components/profile/JKMessageModal.js b/jam-ui/src/components/profile/JKMessageModal.js
index aba024824..d6776962c 100644
--- a/jam-ui/src/components/profile/JKMessageModal.js
+++ b/jam-ui/src/components/profile/JKMessageModal.js
@@ -9,7 +9,7 @@ import { fetchMessagesByReceiverId, postNewMessage } from '../../store/features/
 
 const JKMessageModal = props => {
   const { show, setShow, user } = props;
-  const LIMIT = 20;
+  const LIMIT = 10;
 
   const [fetching, setFetching] = useState(false);
   const [offset, setOffset] = useState(0);
@@ -75,14 +75,6 @@ const JKMessageModal = props => {
     return scrollbar.current.scrollTop === 0;
   };
 
-  const scrollAtMiddle = () => {
-    return scrollbar.current.scrollHeight - scrollbar.current.clientHeight > scrollbar.current.scrollTop;
-  };
-
-  const scrollAtBottom = () => {
-    return scrollbar.current.scrollHeight - scrollbar.current.clientHeight === scrollbar.current.scrollTop;
-  };
-
   const goToBottom = () => {
     if (scrollbar && scrollbar.current) {
       scrollbar.current.scrollToBottom();
@@ -137,7 +129,7 @@ const JKMessageModal = props => {
 
   return (
     <>
-      <Modal isOpen={show} toggle={toggle}>
+      <Modal isOpen={show} toggle={toggle} data-testid="textMessageModal">
         <ModalHeader toggle={toggle}>Conversation with {user.name}</ModalHeader>
         <ModalBody>
           <Scrollbar
@@ -148,7 +140,7 @@ const JKMessageModal = props => {
             trackClickBehavior="step"
           >
             {messages.map((message, index) => (
-              <div className="d-flex mb-3 mr-1" key={message.id}>
+              <div className="d-flex mb-3 mr-1 text-message-row" key={message.id}>
                 <div className="avatar avatar-2xl d-inline-block">
                   <JKProfileAvatar
                     url={message.receiverId === currentUser.id ? currentUser.photo_url : user.photo_url}
diff --git a/jam-ui/src/components/profile/JKProfileOnlinePresence.js b/jam-ui/src/components/profile/JKProfileOnlinePresence.js
index 5454e3798..b44042580 100644
--- a/jam-ui/src/components/profile/JKProfileOnlinePresence.js
+++ b/jam-ui/src/components/profile/JKProfileOnlinePresence.js
@@ -42,7 +42,7 @@ const JKProfileOnlinePresence = ({ onlinePresences, userId }) => {
   
 
   return (
-    <div>
+    <>
       {onlinePresences.map(item => (
         <Link to={serviceUrl(item)} key={`${item.service_type}-${userId}`}>
           {titleize(item.service_type)}
@@ -50,7 +50,7 @@ const JKProfileOnlinePresence = ({ onlinePresences, userId }) => {
       )).reduce((prev, curr) => [prev, ', ', curr])
       }
       
-    </div>
+    </>
   );
 };
 
diff --git a/jam-ui/src/components/profile/JKProfileSidePanel.js b/jam-ui/src/components/profile/JKProfileSidePanel.js
index c905a847d..36c6b354c 100644
--- a/jam-ui/src/components/profile/JKProfileSidePanel.js
+++ b/jam-ui/src/components/profile/JKProfileSidePanel.js
@@ -1,23 +1,27 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
+import moment from 'moment';
+
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import ScrollBarCustom from '../common/ScrollBarCustom';
+
+import { useAuth } from '../../context/AuthContext';
+
 import JKProfileAvatar from './JKProfileAvatar';
 import JKProfileInstrumentsList from './JKProfileInstrumentsList';
-import { Fragment } from 'react';
+
 import JKProfileOnlinePresence from './JKProfileOnlinePresence';
 import JKProfileInterests from './JKProfileInterests';
 import JKProfileGenres from './JKProfileGenres';
 import JKProfilePerformanceSamples from './JKProfilePerformanceSamples';
-import { useAuth } from '../../context/AuthContext';
 import JKConnectButton from './JKConnectButton';
 import JKMessageButton from './JKMessageButton';
 import JKLatencyBadge from './JKLatencyBadge';
 import JKLastActiveAgo from './JKLastActiveAgo';
 import JKProfileSkillLevel from './JKProfileSkillLevel';
-import moment from 'moment';
+
 
 const JKProfileSidePanel = props => {
   const { show, setShow, user, latencyData } = props;
@@ -70,21 +74,21 @@ const JKProfileSidePanel = props => {
               </p>
 
               {user.biography && user.biography.length > 0 && (
-                <div>
+                <div data-testid="biography">
                   <h5>About</h5>
                   <p>{user.biography}</p>
                 </div>
               )}
 
               {user.instruments && user.instruments.length && (
-                <div>
+                <div data-testid="instruments">
                   <h5>Instruments</h5>
                   <JKProfileInstrumentsList instruments={user.instruments} />
                 </div>
               )}
 
               {user.genres && user.genres.length > 0 && (
-                <div>
+                <div data-testid="genres">
                   <br />
                   <h5>Genres</h5>
                   <JKProfileGenres genres={user.genres} />
@@ -92,13 +96,13 @@ const JKProfileSidePanel = props => {
               )}
 
               {user.bands && user.bands.length > 0 && (
-                <div>
+                <div data-testid="bands">
                   <br />
                   <h5>Bands</h5>
                   {user.bands.map(band => (
                     <p>
-                      <a key={band} href="#">
-                        {band}
+                      <a key={band.id} href="#">
+                        {band.name}
                       </a>
                     </p>
                   ))}
@@ -106,14 +110,14 @@ const JKProfileSidePanel = props => {
               )}
 
               {user.performance_samples && user.performance_samples.length > 0 && (
-                <div>
+                <div data-testid="performance_samples">
                   <h5>Performance Samples</h5>
                   <JKProfilePerformanceSamples samples={user.performance_samples} />
                 </div>
               )}
 
               {user.online_presences && user.online_presences.length > 0 && (
-                <div>
+                <div data-testid="online_presences">
                   <br />
                   <h5>Online Presence</h5>
                   <JKProfileOnlinePresence onlinePresences={user.online_presences} userId={user.id} />
@@ -140,13 +144,9 @@ const JKProfileSidePanel = props => {
                       </>
                     }
                   />{' '}
-                  {/* <button className="btn btn-outline-primary" data-testid="message">
-                    <span className="fas fa-comment" /> Send Message
-                  </button> */}
-
                   <JKMessageButton currentUser={currentUser} user={user}>
-              <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" /> Send Message
-            </JKMessageButton>
+                    <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" /> Send Message
+                  </JKMessageButton>
                 </div>
               )}
             </div>
diff --git a/jam-ui/src/store/features/textMessagesSlice.js b/jam-ui/src/store/features/textMessagesSlice.js
index be17abd3f..8c2692447 100644
--- a/jam-ui/src/store/features/textMessagesSlice.js
+++ b/jam-ui/src/store/features/textMessagesSlice.js
@@ -61,10 +61,12 @@ export const textMessageSlice = createSlice({
       })
       .addCase(fetchMessagesByReceiverId.fulfilled, (state, action) => {
         state.status = 'succeeded'
+        
         const msgs = action.payload.map(message => resturectureTextMessage({ message, sent: true }))
         const mergedMsgs = [...state.messages, ...msgs]
         const unique = [];
         mergedMsgs.map(x => unique.filter(a => a.id == x.id).length > 0 ? null : unique.push(x));
+        console.log("unique PAYLOAD", unique);
         state.messages = unique
       })
       .addCase(fetchMessagesByReceiverId.rejected, (state, action) => {
@@ -75,6 +77,7 @@ export const textMessageSlice = createSlice({
         console.log("postNewMessage fullfilled", action.payload);
         state.messages.push(resturectureTextMessage({ message: action.payload, sent: true }))
       })
+      
   }
 })