diff --git a/packages/common/models/link.ts b/packages/common/models/link.ts
index 3aae505..2473e01 100644
--- a/packages/common/models/link.ts
+++ b/packages/common/models/link.ts
@@ -84,4 +84,5 @@ export enum LinkType {
   pdf = "pdf",
   codePile = "codepile",
   pastePics = "paste.pics",
+  googleMeet = "googleMeet",
 }
diff --git a/packages/web/components/Drawer/LinkIcon.tsx b/packages/web/components/Drawer/LinkIcon.tsx
index 8f350f2..fb6aaf8 100644
--- a/packages/web/components/Drawer/LinkIcon.tsx
+++ b/packages/web/components/Drawer/LinkIcon.tsx
@@ -8,7 +8,9 @@ import {
   FaGlobe,
   FaGoogleDrive,
 } from "react-icons/fa";
-import Link, { LinkType } from "../models/link";
+import Link, { LinkType } from "@nirvana/common/models/link";
+
+import { SiGooglemeet } from "react-icons/si";
 
 export default function LinkIcon(props: {
   className?: string;
@@ -41,7 +43,7 @@ export default function LinkIcon(props: {
       return <FaFileCode {...rest} className={`${className} text-pink-200 `} />;
     case LinkType.github:
       return (
-        <FaGithubSquare {...rest} className={`${className} text-gray-200 `} />
+        <FaGithubSquare {...rest} className={`${className} text-gray-400 `} />
       );
     case LinkType.googleDrive:
       return (
@@ -52,7 +54,13 @@ export default function LinkIcon(props: {
         <FaFileImage {...rest} className={`${className} text-purple-500 `} />
       );
     case LinkType.pdf:
-      <FaFilePdf {...rest} className={`${className} text-orange-500 `} />;
+      return (
+        <FaFilePdf {...rest} className={`${className} text-orange-500 `} />
+      );
+    case LinkType.googleMeet:
+      return (
+        <SiGooglemeet {...rest} className={`${className} text-emerald-500 `} />
+      );
     default:
       return (
         <FaFileAlt {...rest} className={`${className} text-orange-500 `} />
diff --git a/packages/web/components/MainTabsOrPages/Conversations.tsx b/packages/web/components/MainTabsOrPages/Conversations.tsx
index 2af358f..dbd6085 100644
--- a/packages/web/components/MainTabsOrPages/Conversations.tsx
+++ b/packages/web/components/MainTabsOrPages/Conversations.tsx
@@ -1,4 +1,5 @@
 import { Avatar, Badge } from "antd";
+import { useRouter } from "next/router";
 import {
   FaDotCircle,
   FaWalking,
@@ -12,8 +13,18 @@ import {
   FaGithub,
   FaAtlassian,
 } from "react-icons/fa";
+import { Routes } from "@nirvana/common/helpers/routes";
 
 export default function Conversations() {
+  const router = useRouter();
+
+  const handleViewConversationDetails = (convoId) => {
+    router.push({
+      pathname: Routes.home,
+      query: { convoId },
+    });
+  };
+
   return (
     <>
       <span className="flex flex-row items-center mb-5 px-5 w-full">
@@ -66,7 +77,10 @@ export default function Conversations() {
         <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
       </span>
 
-      <span className="flex flex-col w-full items-stretch">
+      <span
+        onClick={() => handleViewConversationDetails("woah")}
+        className="flex flex-col w-full items-stretch"
+      >
         {/* engineering */}
         <span
           className="py-2 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
diff --git a/packages/web/components/MainTabsOrPages/ViewConvo.tsx b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
new file mode 100644
index 0000000..4a0c8dc
--- /dev/null
+++ b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
@@ -0,0 +1,95 @@
+import { LinkType } from "@nirvana/common/models/link";
+import { Tooltip } from "antd";
+import { FaExternalLinkAlt, FaGithub, FaImages } from "react-icons/fa";
+import LinkIcon from "../Drawer/LinkIcon";
+
+const testDrawerItems: {
+  linkType: LinkType;
+  linkName: string;
+  relativeSentTime: string;
+}[] = [
+  {
+    linkType: LinkType.googleMeet,
+    linkName: "Gmeet - Meeting",
+    relativeSentTime: "5 seconds ago",
+  },
+  {
+    linkType: LinkType.atlassian,
+    linkName: "Jira Ticket - Ecommerce Plugin",
+    relativeSentTime: "20 minutes ago",
+  },
+  {
+    linkType: LinkType.github,
+    linkName: "React library for hotkeys",
+    relativeSentTime: "2 hours ago",
+  },
+  {
+    linkType: LinkType.googleDrive,
+    linkName: "Engineering - Team Drive Folder",
+    relativeSentTime: "last week",
+  },
+];
+
+export default function ViewConvo(props: { conversationId: string }) {
+  // auth if do not have this conversation in react cache, then we are not authorized
+
+  // if somehow it's still cached but we were removed,
+  // then authenticate by checking if we are in the array of users for the conversation
+
+  return (
+    <>
+      <div className="flex flex-row items-stretch mt-5 space-x-10">
+        {/* drawer items */}
+        <div className="flex-1 flex flex-col max-w-xs">
+          <span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
+            Shared
+          </span>
+
+          {/* column list of drawer items - github first one  */}
+          {testDrawerItems.map((link) => (
+            <span
+              key={link.linkName}
+              className="group flex flex-row items-center border-t p-2 hover:bg-slate-50 transition-all"
+            >
+              {/* <span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer"></span> */}
+
+              <LinkIcon
+                linkType={link.linkType}
+                className="text-3xl shrink-0"
+              />
+
+              <span className="flex flex-col ml-2">
+                <span className="text-slate-500">{link.linkName}</span>
+                <span className="text-slate-300 text-xs">
+                  {link.relativeSentTime}
+                </span>
+              </span>
+
+              <span className="flex flex-row ml-auto space-x-1 group-hover:visible invisible">
+                <Tooltip title={"Add to personal drawer."}>
+                  <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
+                    <FaImages className="text-xl text-slate-400" />
+                  </span>
+                </Tooltip>
+
+                <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
+                  <FaExternalLinkAlt className="text-lg text-slate-400" />
+                </span>
+              </span>
+            </span>
+          ))}
+        </div>
+
+        {/* main timeline view with action buttons on top */}
+        <div className="flex-1 flex flex-col">
+          <span
+            className="text-md tracking-widest font-semibold 
+          text-slate-300 uppercase"
+          >
+            Timeline
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index b66c968..1f88a1f 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -12,26 +12,13 @@ import { FaArrowLeft } from "react-icons/fa";
 import KeyboardShortcutHandler from "../../components/MainTabsOrPages/KeyboardShortcutHandler";
 import SearchResults from "../../components/FullPageExperiences/SearchResults";
 import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
+import ViewConvo from "../../components/MainTabsOrPages/ViewConvo";
 
 export default function Me() {
   // figure out what content to render from here
   const router = useRouter();
   const currPage = router.query.page;
-
-  function getCurrentContent() {
-    switch (currPage) {
-      case QueryRoutes.convos:
-        return <Conversations />;
-      case QueryRoutes.later:
-        return <Later />;
-      case QueryRoutes.done:
-        return <Done />;
-      case QueryRoutes.drawer:
-        return <Drawer />;
-      default:
-        return <></>;
-    }
-  }
+  const currConvo = router.query.convoId;
 
   /** full page replacements: clean full page
    *    1. search page:
@@ -45,6 +32,8 @@ export default function Me() {
     fullCleanPageContent = <SearchResults />;
   } else if (currPage === QueryRoutes.createConvo) {
     fullCleanPageContent = <CreateConversation />;
+  } else if (currConvo) {
+    fullCleanPageContent = <ViewConvo conversationId={"woahhh"} />;
   }
 
   if (fullCleanPageContent) {
@@ -60,7 +49,7 @@ export default function Me() {
                 })
               }
               className="rounded-lg p-2 border flex flex-row items-center space-x-2
-            text-slate-400 text-xs hover:bg-slate-50"
+             text-slate-400 text-xs hover:bg-slate-50"
             >
               <FaArrowLeft />
               <span>back</span>
@@ -86,6 +75,21 @@ export default function Me() {
     );
   }
 
+  function getCurrentContent() {
+    switch (currPage) {
+      case QueryRoutes.convos:
+        return <Conversations />;
+      case QueryRoutes.later:
+        return <Later />;
+      case QueryRoutes.done:
+        return <Done />;
+      case QueryRoutes.drawer:
+        return <Drawer />;
+      default:
+        return <></>;
+    }
+  }
+
   return (
     <div className="flex-1 flex flex-row items-stretch">
       <Sidebar />
diff --git a/packages/web/services/firebaseService.js b/packages/web/services/firebaseService.js
index 6b01339..616dbc4 100644
--- a/packages/web/services/firebaseService.js
+++ b/packages/web/services/firebaseService.js
@@ -11,7 +11,7 @@
 // Import the functions you need from the SDKs you need
 import * as firebase from "firebase/app";
 // import { getAnalytics } from "firebase/analytics";
-import { getFirestore } from "firebase/firestore";
+import { getFirestore, enableIndexedDbPersistence } from "firebase/firestore";
 import {
   browserSessionPersistence,
   getAuth,
@@ -34,27 +34,23 @@ const firebaseConfig = {
 };
 
 // Initialize Firebase
-// if (typeof window !== "undefined") {
 const app = firebase.initializeApp(firebaseConfig);
-// const analytics = getAnalytics(app);
-
 console.log("initialized firebase");
 
+// const analytics = getAnalytics(app);
+
 setPersistence(getAuth(), browserSessionPersistence);
-// }
 
-// import { credential } from 'firebase-admin';
-// import { initializeApp } from 'firebase-admin/app';
-
-// import serviceAccount from '../nirvana-for-business-firebase-adminsdk'
-
-// if(typeof window === 'undefined') {
-//   console.log('initializing firebase admin')
-//   initializeApp({
-//     credential: credential.cert({
-//       privateKey: serviceAccount.private_key,
-//       clientEmail: serviceAccount.client_email,
-//       projectId: serviceAccount.project_id,
-//     })
-//   });
-// }
+// Initialize firestore persistence for data caching
+const db = getFirestore(app);
+enableIndexedDbPersistence(db).catch((err) => {
+  if (err.code == "failed-precondition") {
+    // Multiple tabs open, persistence can only be enabled
+    // in one tab at a a time.
+    // ...
+  } else if (err.code == "unimplemented") {
+    // The current browser does not support all of the
+    // features required to enable persistence
+    // ...
+  }
+});