diff --git a/.DS_Store b/.DS_Store
index b4b7e59..fb40b1e 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js
index 09f962e..e27b131 100644
--- a/frontend/src/Call/CallPlayer.js
+++ b/frontend/src/Call/CallPlayer.js
@@ -129,8 +129,6 @@ function CallPlayer(props) {
   }, [selectCallId, callsData])
 
 
-
-
   return (
     <div ref={positionRef}>
       <Container className="main" >
diff --git a/frontend/src/Call/components/CallInfo.js b/frontend/src/Call/components/CallInfo.js
index b6440f7..a566028 100644
--- a/frontend/src/Call/components/CallInfo.js
+++ b/frontend/src/Call/components/CallInfo.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useCallLink } from "./CallLinks";
 import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
 import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
@@ -9,9 +9,10 @@ import {
   Segment,
   Statistic,
   Icon,
-  Menu
+  Menu,
+  Tab
 } from "semantic-ui-react";
-
+import PlaylistBuilder from "./PlaylistBuilder"
 // ----------------------------------------------------
 function CallInfo(props) {
   const { shortName } = useParams();
@@ -44,51 +45,73 @@ function CallInfo(props) {
     talkgroupNum = currentCall.talkgroupNum;
 
   }
-  const {callLink,callDownload,callTweet} = useCallLink(props.call)
+  const { callLink, callDownload, callTweet } = useCallLink(props.call)
+  const [activeTab, setActiveTab] = useState(0);
+  const handleTabChange = (e, data) => setActiveTab(data.activeIndex);
+
+  const panes = [
+    {
+      menuItem: 'Call Info', render: () => {
+        return (
+          <div>
+            <Tab.Pane attached='bottom'>
+              <Header as='h1'>{header}</Header>
+              <List bulleted horizontal link>
+                {srcList}
+              </List>
+              <Divider />
+              <Statistic size='small'>
+                <Statistic.Label>Seconds</Statistic.Label>
+                <Statistic.Value>{callLength}</Statistic.Value>
+              </Statistic>
+              <Statistic size='small'>
+                <Statistic.Label>Talkgroup</Statistic.Label>
+                <Statistic.Value>{talkgroupNum}</Statistic.Value>
+              </Statistic>
+
+              <List divided verticalAlign='middle'>
+                <List.Item>
+                  <Icon name="wait" />
+                  <List.Content>
+                    {callTime}
+                  </List.Content>
+                </List.Item>
+                <List.Item>
+                  <Icon name="calendar outline" />
+                  <List.Content>
+                    {callDate}
+                  </List.Content>
+                </List.Item>
+                <List.Item>
+                  <Icon name="cubes" />
+                  <List.Content>
+                    {callFreq} MHz
+                  </List.Content>
+                </List.Item>
+              </List>
+            </Tab.Pane>
+            <Menu>
+              <a href={callTweet}><Menu.Item name="tweet" ><Icon name='twitter' />Tweet</Menu.Item></a>
+              <a href={callDownload}><Menu.Item name="download"><Icon name="download" />Download</Menu.Item></a>
+              <a href={callLink}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
+            </Menu>
+          </div>
+        )
+      }
+    },
+    {
+      menuItem: 'Playlist', render: () => {
+        return (
+          <PlaylistBuilder />
+        )
+      }
+    }
+  ]
+
 
   return (
     <div>
-      <Segment padded attached>
-        <Header as='h1'>{header}</Header>
-        <List bulleted horizontal link>
-          {srcList}
-        </List>
-        <Divider />
-        <Statistic size='small'>
-          <Statistic.Label>Seconds</Statistic.Label>
-          <Statistic.Value>{callLength}</Statistic.Value>
-        </Statistic>
-        <Statistic size='small'>
-          <Statistic.Label>Talkgroup</Statistic.Label>
-          <Statistic.Value>{talkgroupNum}</Statistic.Value>
-        </Statistic>
-
-        <List divided verticalAlign='middle'>
-          <List.Item>
-            <Icon name="wait" />
-            <List.Content>
-              {callTime}
-            </List.Content>
-          </List.Item>
-          <List.Item>
-            <Icon name="calendar outline" />
-            <List.Content>
-              {callDate}
-            </List.Content>
-          </List.Item>
-          <List.Item>
-            <Icon name="cubes" />
-            <List.Content>
-              {callFreq} MHz
-            </List.Content>
-          </List.Item>
-        </List>
-      </Segment>
-      <Menu attached='bottom'>
-        <a href={callTweet}><Menu.Item name="tweet" ><Icon name='twitter' />Tweet</Menu.Item></a>
-        <a href={callDownload}><Menu.Item name="download"><Icon name="download" />Download</Menu.Item></a>
-        <a href={callLink}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
-      </Menu>
+      <Tab menu={{ attached: 'top' }} panes={panes} defaultActiveIndex={activeTab} onTabChange={handleTabChange} />
     </div>
   );
 }
diff --git a/frontend/src/Call/PlaylistBuilder.js b/frontend/src/Call/components/PlaylistBuilder.js
similarity index 100%
rename from frontend/src/Call/PlaylistBuilder.js
rename to frontend/src/Call/components/PlaylistBuilder.js