diff --git a/app/public/icons/popout.svg b/app/public/icons/popout.svg
new file mode 100644
index 0000000..e70de62
--- /dev/null
+++ b/app/public/icons/popout.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 36 36" version="1.1"  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>pop-out-line</title>
+    <path class="clr-i-outline clr-i-outline-path-1" d="M27,33H5a2,2,0,0,1-2-2V9A2,2,0,0,1,5,7H15V9H5V31H27V21h2V31A2,2,0,0,1,27,33Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M18,3a1,1,0,0,0,0,2H29.59L15.74,18.85a1,1,0,1,0,1.41,1.41L31,6.41V18a1,1,0,0,0,2,0V3Z"></path>
+    <rect x="0" y="0" width="36" height="36" fill-opacity="0"/>
+</svg>
\ No newline at end of file
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index 030863b..44b6717 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -12,11 +12,24 @@ import OutlineButton from "@/components/OutlineButton";
 import { useToasts } from "@/components/ToastProvider";
 import { useSession } from 'next-auth/react'
 
+const Session = ({ data, onClick = () => { }, ...props }) => {
+  return (
+    <div className="relative w-fit bg-white bg-opacity-5 p-6 m-2">
+      <button className={`absolute right-2 top-1 w-fit text-pink transition-all ease-in-out`} onClick={onClick}>{"->"}</button>
+      <p>Caller Phone: {data.callerPhone}</p>
+      <p>Started At: {data.startedAt}</p>
+    </div>
+  );
+}
+
 const Home: NextPage<any> = ({ officers }) => {
   const { toastDispatch } = useToasts();
   const [input, setInput] = useState({
     phone: '',
   })
+  const [sessions, setSessions] = useState([])
+  const [focusSession, setFocusSession] = useState(null)
+
   const { data: session } = useSession()
   const submit = async () => {
     const operator = await fetch(process.env.NEXT_PUBLIC_API_URL + '/operator/update', {
@@ -33,30 +46,115 @@ const Home: NextPage<any> = ({ officers }) => {
     notify(toastDispatch, "", "Updated Phone: " + input.phone, ToastType.SUCCESS)
   }
 
+  const popOut = async (session) => {
+    const messages = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/message/?sessionId=' + session.id, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    })).json()
+
+    const summary = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/summary/?sessionId=' + session.id, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    })).json()
+
+    session.messages = messages.messages;
+    session.summary = summary.summary;
+    console.log(session)
+
+    setFocusSession(session)
+  }
+
+  const transfer = async () => {
+    console.log(session['token'].sub)
+    const res = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/transfer/?sessionId=' + focusSession.id, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${session['token'].sub}`
+      },
+    })).json()
+    await closePop()
+  }
+
+  const closePop = async () => {
+    setFocusSession(null)
+  }
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      const fetcher = async () => {
+        const s = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session?open=true', {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })).json()
+
+        setSessions(s.sessions)
+      }
+      await fetcher()
+    }, 2000)
+
+    return () => clearInterval(interval)
+  }, [])
+
   return (
     <Layout>
-      <div className="py-16 sm:py-24 ">
+      <div className="relative h-screen py-16 sm:py-24 px-4 sm:px-12 lg:px-24">
         {
           session ?
-            <div className='w-fit bg-white bg-opacity-5 rounded-md p-4 text-center mx-auto'>
-              <h1 className="text-white text-2xl font-extrabold">Hey {session.user.name.split(' ')[0]}!</h1>
-              <p className="text-white text-xl font-light mt-2"> Can you give us your number real quick?</p>
-
-              <div className='w-fit mt-4 mx-auto flex justify-start flex-wrap'>
-                <div className='w-72 mr-4'>
-                  <InputField name="Phone Number" id="phone" value={input.phone} onChange={(e) => handleInputChange(e, input, setInput)} className="w-full" />
+            <>
+              {focusSession ?
+                <div className="absolute w-fit z-10 text-white bg-black bg-opacity-80 p-8 rounded-sm left-0 right-0 mx-auto">
+                  <button className={`absolute right-2 top-1 w-fit text-pink transition-all ease-in-out font-bold`} onClick={closePop}>{"X"}</button>
+                  <div className="flex items-center ">
+                    <h2 className="w-fit text-3xl font-extrabold">Caller: {focusSession.callerPhone} | {focusSession.startedAt}</h2>
+                    <OutlineButton name="Transfer" onClick={transfer} className="ml-8" />
+                  </div>
+                  <p className="my-4 text-white"><span className="text-pink font-bold">Summary: </span>{focusSession.summary}</p>
+                  {focusSession.messages.map(msg => {
+                    return (
+                      <div key={msg.id}>
+                        <p className="text-white"><span className={`${msg.role == "USER" ? "text-green-300" : "text-blue-300"} font-bold`}>{msg.role}: </span>{msg.content}</p>
+                        <p></p>
+                      </div>
+                    );
+                  })}
                 </div>
-                <div className='mt-4 flex items-center justify-center'>
-                  <OutlineButton name="Register" onClick={submit} />
+                : null
+              }
+              <div className={`${focusSession ? 'blur-sm' : 'blur-0'} transition-all`}>
+                <div className='w-fit bg-white bg-opacity-5 rounded-md p-4 text-center mx-auto'>
+                  <h2 className="text-white text-2xl font-extrabold">Hey {session.user.name.split(' ')[0]}!</h2>
+                  <p className="text-white text-xl font-light mt-2"> Can you give us your number real quick?</p>
+
+                  <div className='w-fit mt-4 mx-auto flex justify-start flex-wrap'>
+                    <div className='w-72 mr-4'>
+                      <InputField name="Phone Number" id="phone" value={input.phone} onChange={(e) => handleInputChange(e, input, setInput)} className="w-full" />
+                    </div>
+                    <div className='mt-4 flex items-center justify-center'>
+                      <OutlineButton name="Register" onClick={submit} />
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-16 text-white text-center p-4">
+                  <h2 className="text-2xl font-extrabold">Active Calls</h2>
+                  <div className="flex justify-center flex-wrap">
+                    {sessions.map(session =>
+                      <Session data={session} key={session.id} onClick={() => popOut(session)} />
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
+
+            </>
             : null
         }
-
-
       </div>
-
     </Layout>
   );
 };