diff --git a/src/modules/conversations/components/ConversationsSidebar.tsx b/src/modules/conversations/components/ConversationsSidebar.tsx
index 1c91548c..e0d97033 100644
--- a/src/modules/conversations/components/ConversationsSidebar.tsx
+++ b/src/modules/conversations/components/ConversationsSidebar.tsx
@@ -1,113 +1,115 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Drawer, Layout, List, Menu } from 'antd';
 import { useSelector } from 'react-redux';
 import { CheckCircle, Heart, RefreshCcw, Star } from 'react-feather';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import { LeadAvatar, ConversationsService } from '@onr/conversations';
+import {
+  LeadAvatar,
+  ConversationsService,
+  ConversationsMainPageConsumer,
+} from '@onr/conversations';
+import ConversationsMainPageContext from '@onr/conversations/pages/ConversationsMainPageContext';
 
 const { Sider } = Layout;
 
-interface ConversationsSidebarProps {
-  conversationsData: any;
-  onConversationSelected: any;
-  setConversationsResponse: any;
-  currentPage: number;
-}
-
-export const ConversationsSidebar: React.FC<ConversationsSidebarProps> = ({
-  conversationsData,
-  onConversationSelected,
-  setConversationsResponse,
-  currentPage,
-}: ConversationsSidebarProps) => {
+export const ConversationsSidebar: React.FC = () => {
   const isMobile = useSelector((store: any) => store.wrapper.mobile);
   const [messages, setMessages] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { setSelectedIndex, conversationsResponse, setConversationsResponse } = useContext(
+    ConversationsMainPageContext,
+  );
+
   const changeIndex = (index: number) => {
     setSelectedIndex(index);
-    onConversationSelected(index);
   };
-  const onListScroll = async (e) => {
-    const element = e.target
+  const onListScroll = async e => {
+    const element = e.target;
     if (element.scrollHeight - element.scrollTop === element.clientHeight) {
-      const conversationsResponse = await ConversationsService.getConversations({
+      const nextPageResponse = await ConversationsService.getConversations({
         campaignId: '1',
         params: {
-          page: currentPage + 1,
+          page: conversationsResponse.meta.current_page + 1,
         },
       });
-      // console.log(conversationsData);
-      conversationsResponse.data = conversationsData.concat(conversationsResponse.data);
-
-      setConversationsResponse(conversationsResponse);
+      nextPageResponse.data = conversationsResponse.data.concat(nextPageResponse.data);
+      setConversationsResponse(nextPageResponse);
     }
   };
   const conversations = (
-    <div
-      css={`
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-        border-right: 1px solid rgba(0, 0, 0, 0.05);
-      `}
-    >
-      <Menu mode="horizontal" className="border-0 m-auto">
-        <Menu.Item key="read">
-          <a href="javascript:;">
-            <CheckCircle size={20} strokeWidth={1} />
-          </a>
-        </Menu.Item>
-        <Menu.Item key="favorite">
-          <a href="javascript:;">
-            <Heart size={20} strokeWidth={1} />
-          </a>
-        </Menu.Item>
-        <Menu.Item key="star">
-          <a href="javascript:;">
-            <Star size={20} strokeWidth={1} />
-          </a>
-        </Menu.Item>
-        <Menu.Item key="refresh">
-          <a href="javascript:;">
-            <RefreshCcw size={20} strokeWidth={1} />
-          </a>
-        </Menu.Item>
-      </Menu>
-      <List
-        className="scroll-y flex-1 bg-transparent px-3 py-1"
-        dataSource={conversationsData}
-        itemLayout="horizontal"
-        onScroll={onListScroll}
-        renderItem={(item, index) => (
-          <List.Item
-            onClick={changeIndex.bind(null, index)}
-            style={{
-              backgroundColor: selectedIndex === index ? '#e6f7ff' : '',
-            }}
-            className={`${selectedIndex === index ? '' : 'border-0'} rounded border-0 p-3`}
+    <ConversationsMainPageConsumer>
+      {({ selectedIndex, conversationsResponse }) => {
+        return (
+          <div
+            css={`
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              height: 100%;
+              overflow: hidden;
+              border-right: 1px solid rgba(0, 0, 0, 0.05);
+            `}
           >
-            <List.Item.Meta
-              avatar={<LeadAvatar name={item.lead.phone} />}
-              title={
-                <small
-                  css={`
-                    display: flex;
-                    width: 100%;
-                  `}
+            <Menu mode="horizontal" className="border-0 m-auto">
+              <Menu.Item key="read">
+                <a href="javascript:;">
+                  <CheckCircle size={20} strokeWidth={1} />
+                </a>
+              </Menu.Item>
+              <Menu.Item key="favorite">
+                <a href="javascript:;">
+                  <Heart size={20} strokeWidth={1} />
+                </a>
+              </Menu.Item>
+              <Menu.Item key="star">
+                <a href="javascript:;">
+                  <Star size={20} strokeWidth={1} />
+                </a>
+              </Menu.Item>
+              <Menu.Item key="refresh">
+                <a href="javascript:;">
+                  <RefreshCcw size={20} strokeWidth={1} />
+                </a>
+              </Menu.Item>
+            </Menu>
+            <List
+              className="scroll-y flex-1 bg-transparent px-3 py-1"
+              dataSource={conversationsResponse.data}
+              itemLayout="horizontal"
+              onScroll={onListScroll}
+              renderItem={(item, index) => (
+                <List.Item
+                  onClick={changeIndex.bind(null, index)}
+                  style={{
+                    backgroundColor: selectedIndex === index ? '#e6f7ff' : '',
+                  }}
+                  className={`${selectedIndex === index ? '' : 'border-0'} rounded border-0 p-3`}
                 >
-                  <span>{item.lead.phone}</span>
-                  <span className="mr-auto" />
-                  <span>{item.latest_message && distanceInWordsToNow(new Date(item.latest_message.created_at))}</span>
-                </small>
-              }
-              description={item.latest_message && item.latest_message.content}
+                  <List.Item.Meta
+                    avatar={<LeadAvatar name={item.lead.phone} />}
+                    title={
+                      <small
+                        css={`
+                          display: flex;
+                          width: 100%;
+                        `}
+                      >
+                        <span>{item.lead.phone}</span>
+                        <span className="mr-auto" />
+                        <span>
+                          {item.latest_message &&
+                            distanceInWordsToNow(new Date(item.latest_message.created_at))}
+                        </span>
+                      </small>
+                    }
+                    description={item.latest_message && item.latest_message.content}
+                  />
+                </List.Item>
+              )}
             />
-          </List.Item>
-        )}
-      />
-    </div>
+          </div>
+        );
+      }}
+    </ConversationsMainPageConsumer>
   );
   return (
     <>
diff --git a/src/modules/conversations/pages/ConversationsMainPage.tsx b/src/modules/conversations/pages/ConversationsMainPage.tsx
index 546b6ea2..7a10a68b 100644
--- a/src/modules/conversations/pages/ConversationsMainPage.tsx
+++ b/src/modules/conversations/pages/ConversationsMainPage.tsx
@@ -8,6 +8,8 @@ import {
   ConversationsService,
 } from '@onr/conversations';
 
+import { ConversationsMainPageProvider } from './ConversationsMainPageContext';
+
 const ConversationsComponent: React.FC = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [conversationsResponse, setConversationsResponse] = useState({ data: [], meta: {} });
@@ -15,9 +17,6 @@ const ConversationsComponent: React.FC = () => {
     const response = await ConversationsService.getConversations({ campaignId });
     return response;
   };
-  const onConversationSelected = (index: number) => {
-    setSelectedIndex(index);
-  };
 
   useEffect(() => {
     (async function() {
@@ -28,18 +27,22 @@ const ConversationsComponent: React.FC = () => {
 
   return (
     <>
-      <Layout className="fill-workspace rounded shadow-sm overflow-hidden">
-        <FilterSidebar />
-        <ConversationsSidebar
-          conversationsData={conversationsResponse.data}
-          setConversationsResponse={setConversationsResponse}
-          onConversationSelected={onConversationSelected}
-          currentPage={conversationsResponse.meta.current_page}
-        />
-        {conversationsResponse.data[selectedIndex] && (
-          <ChatRoom conversation={conversationsResponse.data[selectedIndex]} />
-        )}
-      </Layout>
+      <ConversationsMainPageProvider
+        value={{
+          selectedIndex: selectedIndex,
+          setSelectedIndex: setSelectedIndex,
+          conversationsResponse: conversationsResponse,
+          setConversationsResponse: setConversationsResponse,
+        }}
+      >
+        <Layout className="fill-workspace rounded shadow-sm overflow-hidden">
+          <FilterSidebar />
+          <ConversationsSidebar />
+          {conversationsResponse.data[selectedIndex] && (
+            <ChatRoom conversation={conversationsResponse.data[selectedIndex]} />
+          )}
+        </Layout>
+      </ConversationsMainPageProvider>
     </>
   );
 };
diff --git a/src/modules/conversations/pages/ConversationsMainPageContext.ts b/src/modules/conversations/pages/ConversationsMainPageContext.ts
new file mode 100644
index 00000000..0fb4d5c2
--- /dev/null
+++ b/src/modules/conversations/pages/ConversationsMainPageContext.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ConversationsMainPageContext = React.createContext({});
+
+export const ConversationsMainPageProvider = ConversationsMainPageContext.Provider;
+export const ConversationsMainPageConsumer = ConversationsMainPageContext.Consumer;
+export default ConversationsMainPageContext;
diff --git a/src/modules/conversations/pages/index.ts b/src/modules/conversations/pages/index.ts
index a4eda5a5..9823e177 100644
--- a/src/modules/conversations/pages/index.ts
+++ b/src/modules/conversations/pages/index.ts
@@ -1 +1,2 @@
 export * from './ConversationsMainPage';
+export * from './ConversationsMainPageContext';