diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx
index 5e700b0..c58903e 100644
--- a/src/app/components/Copilot/Copilot.tsx
+++ b/src/app/components/Copilot/Copilot.tsx
@@ -113,6 +113,9 @@ export function CopilotChat(): React.JSX.Element {
   const [chatSelected, setChatSelected] = useState('-- no chat selected --');
   const [chatInputData, setData] = useState('');
   const [message, setMessage] = useState<string>('');
+  const [chats, setChats] = useState<string[]>([]); // State variable to store chat names
+  const [currentChatIndex, setCurrentChatIndex] = useState<number>(-1); // State variable to track the index of the selected chat
+
 
   // handles the data changes on the chat input.
   const handleCopilotChatInputChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
@@ -136,27 +139,24 @@ export function CopilotChat(): React.JSX.Element {
   };
     
   // for setting the initial copilot chat that takes place on page load.
+  const getInitialChat = async () => {
+    await new Pieces.ConversationsApi().conversationsSnapshot({}).then(output => {
+      const previousChats = output.iterable.map(conversation => conversation.name);
+      setChats(previousChats);
+      const _name = previousChats[0];
+      setChatSelected(_name);
+      GlobalConversationID = output.iterable.at(0).id;
+    });
+  };
+
+  // Function to handle chat selection
+  const handleChatSelection = (index: number) => {
+    setCurrentChatIndex(index);
+    setChatSelected(chats[index]);
+    // Here you can fetch and display the messages of the selected chat based on its index
+  };
+
   useEffect(() => {
-    const getInitialChat = async () => {
-      let _name: string;
-
-      await new Pieces.ConversationsApi()
-        .conversationsSnapshot({})
-        .then((output) => {
-          if (
-            output.iterable.length > 0 &&
-            output.iterable.at(0).hasOwnProperty("name")
-          ) {
-            _name = output.iterable.at(0).name;
-            GlobalConversationID = output.iterable.at(0).id;
-          }
-          return _name;
-        });
-        
-      if (_name) {
-        setChatSelected(_name);
-      }
-    };
     getInitialChat();
   }, []);
 
@@ -167,10 +167,13 @@ export function CopilotChat(): React.JSX.Element {
           <h1>Copilot Chat</h1>
           <button className="button" onClick={handleNewConversation}>Create Fresh Conversation</button>
         </div>
-        <div className="footer">
-          <button>back</button>
-          <p>{chatSelected}</p>
-          <button>forward</button>
+        <div className="chat-dropdown">
+          <select value={chatSelected} onChange={handleChatSelection}>
+            <option value="">-- Select Chat --</option>
+          {chats.map((chat, index) => (
+             <option key ={index} value={chat}>{chat}</option>
+          ))}
+          </select>  
         </div>
       </div>
       <div className="chat-box">
@@ -186,4 +189,4 @@ export function CopilotChat(): React.JSX.Element {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}