diff --git a/packages/desktop/src/providers/RealTimeRoomProvider.tsx b/packages/desktop/src/providers/RealTimeRoomProvider.tsx
index 66425bb..867c817 100644
--- a/packages/desktop/src/providers/RealTimeRoomProvider.tsx
+++ b/packages/desktop/src/providers/RealTimeRoomProvider.tsx
@@ -293,26 +293,39 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
    * tune into socket room and tell everyone else
    */
   const handleSelectLine = useCallback(
-    (newLineIdToSelect: string) => {
-      setSelectedLineId((prevLineId) => {
-        if (newLineIdToSelect === prevLineId) {
-          return prevLineId;
-        }
+    (newLineIdToSelect: string | undefined) => {
+      if (!newLineIdToSelect) {
+        setSelectedLineId(undefined);
+      } else {
+        setSelectedLineId((prevLineId) => {
+          if (newLineIdToSelect === prevLineId) {
+            return prevLineId;
+          }
 
-        // untune from the last line if it was just a temporary tuned one
-        if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) {
-          handleUntuneFromLine(prevLineId);
-        }
+          // untune from the last line if it was just a temporary tuned one
+          if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) {
+            handleUntuneFromLine(prevLineId);
+          }
 
-        // tune in if not already tuned into this line
-        if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) {
-          handleTuneIntoLine(newLineIdToSelect);
-        }
+          // tune in if not already tuned into this line
+          if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) {
+            handleTuneIntoLine(newLineIdToSelect);
+          }
 
-        return newLineIdToSelect;
-      });
+          return newLineIdToSelect;
+        });
+      }
+
+      setShowNewChannelForm(false);
     },
-    [setSelectedLineId, handleUntuneFromLine, roomMap, user, handleTuneIntoLine],
+    [
+      setSelectedLineId,
+      handleUntuneFromLine,
+      roomMap,
+      user,
+      handleTuneIntoLine,
+      setShowNewChannelForm,
+    ],
   );
 
   const handleShowNewChannelForm = useCallback(
diff --git a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx
new file mode 100644
index 0000000..e171785
--- /dev/null
+++ b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx
@@ -0,0 +1,287 @@
+import React, { useMemo, useEffect, useState } from 'react';
+import useAuth from '../../../../providers/AuthProvider';
+import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
+import useStreams from '../../../../providers/StreamProvider';
+
+import { LineMemberState } from '@nirvana/core/models/line.model';
+import LineIcon from '../../../../components/lineIcon';
+import {
+  FiActivity,
+  FiHeadphones,
+  FiImage,
+  FiMoreVertical,
+  FiSearch,
+  FiSettings,
+  FiSun,
+  FiUsers,
+  FiVideo,
+} from 'react-icons/fi';
+import { Avatar, Tooltip } from 'antd';
+
+export default function LineDetails() {
+  const { user } = useAuth();
+
+  const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useRealTimeRooms();
+
+  const selectedLine = useMemo(() => roomsMap[selectedLineId], [selectedLineId, roomsMap]);
+
+  const isUserToggleTuned = useMemo(
+    () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
+    [selectedLine],
+  );
+
+  const { peerMap } = useStreams();
+
+  // seeing if I am in the list of broadcasters
+  // the source of truth from the socket connections telling me if my clicking actually made a round trip
+  const isUserBroadcasting = useMemo(
+    () => selectedLine?.currentBroadcastersUserIds?.includes(user._id.toString()),
+    [user, selectedLine],
+  );
+
+  // showing all tuned in members...they may not hear me since they might be doing something else
+  // but feeling of presentness
+  const tunedProfiles = useMemo(() => {
+    const pictureSources: { name: string; pictureSrc: string }[] = [];
+
+    selectedLine.tunedInMemberIds?.forEach((tunedInMemberUserId) => {
+      // don't want to see my own picture
+      // TODO: don't show myself!?
+      if (tunedInMemberUserId === user._id.toString()) {
+        pictureSources.push();
+
+        pictureSources.push({
+          name: user.givenName,
+          pictureSrc: user.picture,
+        });
+        return;
+      }
+
+      const otherUserObject = selectedLine.otherUserObjects?.find(
+        (userObj) => userObj._id.toString() === tunedInMemberUserId,
+      );
+      if (otherUserObject?.picture)
+        pictureSources.push({
+          name: otherUserObject.givenName,
+          pictureSrc: otherUserObject.picture,
+        });
+    });
+
+    return pictureSources;
+  }, [selectedLine, user]);
+
+  // pics for the line icons
+  const profilePictures = useMemo(() => {
+    const pictureSources: string[] = [];
+
+    // ?don't add in my image as that's useless contextually?
+    // if (userData?.user?.picture) pictureSources.push(userData.user.picture);
+
+    selectedLine.otherUserObjects?.forEach((otherUser) => {
+      if (otherUser.picture) pictureSources.push(otherUser.picture);
+    });
+
+    return pictureSources;
+  }, [selectedLine]);
+
+  return (
+    <div className="flex flex-col flex-1 bg-white relative">
+      {/* line details */}
+      <div
+        className="p-5 z-30
+        flex flex-row items-center justify-end border-b-gray-200 border-b shadow-2xl group"
+      >
+        {profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}
+
+        <div className="ml-2 mr-auto flex flex-col items-start ">
+          <span className="flex flex-row gap-2 items-center">
+            <h2 className={`text-md text-gray-800 font-semibold`}>
+              {selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
+            </h2>
+
+            <button
+              className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
+           transition-all hover:scale-105`}
+            >
+              <FiSettings className="text-gray-400 text-xs" />
+            </button>
+          </span>
+        </div>
+
+        <Avatar.Group className={'animate-pulse'} key={`lineHistoryMessage-yesterday-afternoon}`}>
+          <Avatar
+            key={`linehistory-${1}`}
+            src={user.picture}
+            shape="square"
+            size={'large'}
+            // grayscale if not playing?
+            className={`shadow-lg`}
+          />
+          {selectedLine.otherUserObjects.map((otherUser) => (
+            <Avatar
+              key={`linehistory-${1}`}
+              src={otherUser.picture}
+              shape="square"
+              size={'large'}
+              className={`shadow-lg`}
+            />
+          ))}
+        </Avatar.Group>
+
+        <span className="px-10 text-gray-200"> | </span>
+
+        <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+          {selectedLine.otherUserObjects.map((otherUser) => (
+            <Avatar
+              key={`linehistory-${1}`}
+              src={otherUser.picture}
+              shape="square"
+              size={'default'}
+              // grayscale if not playing?
+              className={`${true && 'grayscale'}`}
+            />
+          ))}
+        </Avatar.Group>
+      </div>
+
+      {/* main canvas */}
+      <div className="flex flex-col flex-1">
+        {/* line timeline */}
+        <div
+          className="flex-1 flex flex-col justify-start items-center gap-2 p-5 mx-auto
+            max-w-lg w-full bg-white"
+        >
+          <span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
+
+          <span className={'text-gray-300 text-sm'}>yesterday</span>
+
+          <div
+            className={`rounded flex flex-row items-center gap-2 w-full 
+            p-5 border-gray-200 border`}
+          >
+            <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+              {selectedLine.otherUserObjects.map((otherUser) => (
+                <Avatar
+                  key={`linehistory-${1}`}
+                  src={otherUser.picture}
+                  shape="square"
+                  size={'default'}
+                  // grayscale if not playing?
+                  className={`${true && 'grayscale'}`}
+                />
+              ))}
+            </Avatar.Group>
+
+            {selectedLine.otherUserObjects.map((otherUser) => (
+              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
+                {`${otherUser.givenName}, `}
+              </span>
+            ))}
+
+            <span className="ml-auto text-xs text-gray-300">{`${
+              Math.floor(Math.random() * 10) + 1
+            }:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
+
+            <span className="text-gray-400 text-md">{`${
+              Math.floor(Math.random() * 60) + 1
+            } seconds`}</span>
+          </div>
+
+          <span className={'text-gray-300 text-sm'}>today</span>
+
+          <div
+            className={`rounded flex flex-row items-center gap-2 w-full shadow-lg p-5
+          border-gray-200 border`}
+          >
+            <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+              {selectedLine.otherUserObjects.map((otherUser) => (
+                <Avatar
+                  key={`linehistory-${1}`}
+                  src={otherUser.picture}
+                  shape="square"
+                  size={'default'}
+                  // grayscale if not playing?
+                  className={`${true && 'grayscale'}`}
+                />
+              ))}
+            </Avatar.Group>
+
+            {selectedLine.otherUserObjects.map((otherUser) => (
+              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
+                {`${otherUser.givenName}, `}
+              </span>
+            ))}
+
+            <span className="ml-auto text-xs text-gray-300">{`${
+              Math.floor(Math.random() * 10) + 1
+            }:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
+
+            <span className="text-gray-400 text-md">{`${
+              Math.floor(Math.random() * 60) + 1
+            } seconds`}</span>
+          </div>
+
+          <span className={'text-teal-500 text-sm flex flex-row gap-2 items-center mt-5'}>
+            <FiSun />
+            <span>right now</span>
+          </span>
+
+          {/* live broadcasters */}
+          <div className="flex flex-col w-full gap-2 shadow-2xl border border-teal-500 rounded">
+            {selectedLine.otherUserObjects.map((otherUser) => (
+              <div key={otherUser.email} className="flex flex-row items-center gap-2 p-4">
+                <Avatar
+                  key={`linehistory-${1}`}
+                  src={otherUser.picture}
+                  shape="square"
+                  size={'large'}
+                />
+
+                <span className="text-gray-600 font-semibold">{otherUser.name}</span>
+
+                <FiHeadphones className="ml-auto text-lg" />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* canvas action buttons */}
+        <div className="flex flex-row gap-3 p-10 justify-end items-center ">
+          <Tooltip
+            placement="left"
+            title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
+          >
+            <button
+              className={`p-2 flex justify-center items-center shadow-lg
+          hover:scale-105 transition-all animate-pulse ${
+            isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
+          }`}
+              onClick={() =>
+                isUserToggleTuned
+                  ? handleUpdateLineMemberState(
+                      selectedLine.lineDetails._id.toString(),
+                      LineMemberState.INBOX,
+                    )
+                  : handleUpdateLineMemberState(
+                      selectedLine.lineDetails._id.toString(),
+                      LineMemberState.TUNED,
+                    )
+              }
+            >
+              <FiActivity className="text-md" />
+            </button>
+          </Tooltip>
+
+          <button
+            className={`p-3 flex justify-center items-center shadow-2xl
+            hover:scale-105 transition-all ${
+              isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
+            }`}
+          >
+            <FiSun className="text-lg" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
index 436fbf1..5c1fee9 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
@@ -19,6 +19,7 @@ import { Avatar, Tooltip } from 'antd';
 import useStreams from '../../../../providers/StreamProvider';
 import Peer from 'simple-peer';
 import NewChannelForm from '../compose/NewChannelForm';
+import LineDetails from '../line/LineDetails';
 
 export default function MainPanel() {
   const { user } = useAuth();
@@ -45,274 +46,6 @@ export default function MainPanel() {
   );
 }
 
-function LineDetails() {
-  const { user } = useAuth();
-
-  const { selectedLineId, roomsMap, handleUpdateLineMemberState } = useRealTimeRooms();
-
-  const selectedLine = useMemo(() => roomsMap[selectedLineId], [selectedLineId, roomsMap]);
-
-  const isUserToggleTuned = useMemo(
-    () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
-    [selectedLine],
-  );
-
-  const { peerMap } = useStreams();
-
-  // seeing if I am in the list of broadcasters
-  // the source of truth from the socket connections telling me if my clicking actually made a round trip
-  const isUserBroadcasting = useMemo(
-    () => selectedLine?.currentBroadcastersUserIds?.includes(user._id.toString()),
-    [user, selectedLine],
-  );
-
-  // showing all tuned in members...they may not hear me since they might be doing something else
-  // but feeling of presentness
-  const tunedProfiles = useMemo(() => {
-    const pictureSources: { name: string; pictureSrc: string }[] = [];
-
-    selectedLine.tunedInMemberIds?.forEach((tunedInMemberUserId) => {
-      // don't want to see my own picture
-      // TODO: don't show myself!?
-      if (tunedInMemberUserId === user._id.toString()) {
-        pictureSources.push();
-
-        pictureSources.push({
-          name: user.givenName,
-          pictureSrc: user.picture,
-        });
-        return;
-      }
-
-      const otherUserObject = selectedLine.otherUserObjects?.find(
-        (userObj) => userObj._id.toString() === tunedInMemberUserId,
-      );
-      if (otherUserObject?.picture)
-        pictureSources.push({
-          name: otherUserObject.givenName,
-          pictureSrc: otherUserObject.picture,
-        });
-    });
-
-    return pictureSources;
-  }, [selectedLine, user]);
-
-  // pics for the line icons
-  const profilePictures = useMemo(() => {
-    const pictureSources: string[] = [];
-
-    // ?don't add in my image as that's useless contextually?
-    // if (userData?.user?.picture) pictureSources.push(userData.user.picture);
-
-    selectedLine.otherUserObjects?.forEach((otherUser) => {
-      if (otherUser.picture) pictureSources.push(otherUser.picture);
-    });
-
-    return pictureSources;
-  }, [selectedLine]);
-
-  return (
-    <div className="flex flex-col flex-1 bg-white relative">
-      {/* line details */}
-      <div
-        className="p-5 z-30
-        flex flex-row items-center justify-end border-b-gray-200 border-b shadow-2xl group"
-      >
-        {profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}
-
-        <div className="ml-2 mr-auto flex flex-col items-start ">
-          <span className="flex flex-row gap-2 items-center">
-            <h2 className={`text-md text-gray-800 font-semibold`}>
-              {selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
-            </h2>
-
-            <button
-              className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
-           transition-all hover:scale-105`}
-            >
-              <FiSettings className="text-gray-400 text-xs" />
-            </button>
-          </span>
-        </div>
-
-        <Avatar.Group className={'animate-pulse'} key={`lineHistoryMessage-yesterday-afternoon}`}>
-          <Avatar
-            key={`linehistory-${1}`}
-            src={user.picture}
-            shape="square"
-            size={'large'}
-            // grayscale if not playing?
-            className={`shadow-lg`}
-          />
-          {selectedLine.otherUserObjects.map((otherUser) => (
-            <Avatar
-              key={`linehistory-${1}`}
-              src={otherUser.picture}
-              shape="square"
-              size={'large'}
-              className={`shadow-lg`}
-            />
-          ))}
-        </Avatar.Group>
-
-        <span className="px-10 text-gray-200"> | </span>
-
-        <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
-          {selectedLine.otherUserObjects.map((otherUser) => (
-            <Avatar
-              key={`linehistory-${1}`}
-              src={otherUser.picture}
-              shape="square"
-              size={'default'}
-              // grayscale if not playing?
-              className={`${true && 'grayscale'}`}
-            />
-          ))}
-        </Avatar.Group>
-      </div>
-
-      {/* main canvas */}
-      <div className="flex flex-col flex-1">
-        {/* line timeline */}
-        <div
-          className="flex-1 flex flex-col justify-start items-center gap-2 p-5 mx-auto
-            max-w-lg w-full bg-white"
-        >
-          <span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
-
-          <span className={'text-gray-300 text-sm'}>yesterday</span>
-
-          <div
-            className={`rounded flex flex-row items-center gap-2 w-full 
-            p-5 border-gray-200 border`}
-          >
-            <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
-              {selectedLine.otherUserObjects.map((otherUser) => (
-                <Avatar
-                  key={`linehistory-${1}`}
-                  src={otherUser.picture}
-                  shape="square"
-                  size={'default'}
-                  // grayscale if not playing?
-                  className={`${true && 'grayscale'}`}
-                />
-              ))}
-            </Avatar.Group>
-
-            {selectedLine.otherUserObjects.map((otherUser) => (
-              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
-                {`${otherUser.givenName}, `}
-              </span>
-            ))}
-
-            <span className="ml-auto text-xs text-gray-300">{`${
-              Math.floor(Math.random() * 10) + 1
-            }:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
-
-            <span className="text-gray-400 text-md">{`${
-              Math.floor(Math.random() * 60) + 1
-            } seconds`}</span>
-          </div>
-
-          <span className={'text-gray-300 text-sm'}>today</span>
-
-          <div
-            className={`rounded flex flex-row items-center gap-2 w-full shadow-lg p-5
-          border-gray-200 border`}
-          >
-            <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
-              {selectedLine.otherUserObjects.map((otherUser) => (
-                <Avatar
-                  key={`linehistory-${1}`}
-                  src={otherUser.picture}
-                  shape="square"
-                  size={'default'}
-                  // grayscale if not playing?
-                  className={`${true && 'grayscale'}`}
-                />
-              ))}
-            </Avatar.Group>
-
-            {selectedLine.otherUserObjects.map((otherUser) => (
-              <span key={`chunk-${otherUser.name}`} className="text-gray-500">
-                {`${otherUser.givenName}, `}
-              </span>
-            ))}
-
-            <span className="ml-auto text-xs text-gray-300">{`${
-              Math.floor(Math.random() * 10) + 1
-            }:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
-
-            <span className="text-gray-400 text-md">{`${
-              Math.floor(Math.random() * 60) + 1
-            } seconds`}</span>
-          </div>
-
-          <span className={'text-teal-500 text-sm flex flex-row gap-2 items-center mt-5'}>
-            <FiSun />
-            <span>right now</span>
-          </span>
-
-          {/* live broadcasters */}
-          <div className="flex flex-col w-full gap-2 shadow-2xl border border-teal-500 rounded">
-            {selectedLine.otherUserObjects.map((otherUser) => (
-              <div key={otherUser.email} className="flex flex-row items-center gap-2 p-4">
-                <Avatar
-                  key={`linehistory-${1}`}
-                  src={otherUser.picture}
-                  shape="square"
-                  size={'large'}
-                />
-
-                <span className="text-gray-600 font-semibold">{otherUser.name}</span>
-
-                <FiHeadphones className="ml-auto text-lg" />
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* canvas action buttons */}
-        <div className="flex flex-row gap-3 p-10 justify-end items-center ">
-          <Tooltip
-            placement="left"
-            title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
-          >
-            <button
-              className={`p-2 flex justify-center items-center shadow-lg
-          hover:scale-105 transition-all animate-pulse ${
-            isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
-          }`}
-              onClick={() =>
-                isUserToggleTuned
-                  ? handleUpdateLineMemberState(
-                      selectedLine.lineDetails._id.toString(),
-                      LineMemberState.INBOX,
-                    )
-                  : handleUpdateLineMemberState(
-                      selectedLine.lineDetails._id.toString(),
-                      LineMemberState.TUNED,
-                    )
-              }
-            >
-              <FiActivity className="text-md" />
-            </button>
-          </Tooltip>
-
-          <button
-            className={`p-3 flex justify-center items-center shadow-2xl
-            hover:scale-105 transition-all ${
-              isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
-            }`}
-          >
-            <FiSun className="text-lg" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function LineStreams({ broadcasters }: { broadcasters: string[] }) {
   const { peerMap } = useStreams();