diff --git a/client/src/Playlist-Editor/Chat/ChatMessage.tsx b/client/src/Playlist-Editor/Chat/ChatMessage.tsx
index 62d34f7..1d88b63 100644
--- a/client/src/Playlist-Editor/Chat/ChatMessage.tsx
+++ b/client/src/Playlist-Editor/Chat/ChatMessage.tsx
@@ -69,11 +69,15 @@ export const SituatedChatMessage = ({
         {new Date(chatEvent.timestamp).toLocaleString()}
       </time>
     </div>
-    { chatEvent.action &&
+    { chatEvent.action !== 'comment' &&
       <p style={actionStyle}>
         { chatEvent.action === 'add'
         ? 'Added this track'
-        : 'Removed this track'
+        : chatEvent.action === 'remove'
+        ? 'Removed this track'
+        : chatEvent.action === 're-add'
+        ? 'Re-added this track'
+        : 'Error occurred'
         }
       </p>
     }
diff --git a/client/src/Playlist-Editor/Chat/MessageEditor.tsx b/client/src/Playlist-Editor/Chat/MessageEditor.tsx
index 504252e..76300b1 100644
--- a/client/src/Playlist-Editor/Chat/MessageEditor.tsx
+++ b/client/src/Playlist-Editor/Chat/MessageEditor.tsx
@@ -52,11 +52,13 @@ type UserAction = State['userAction']
 
 
 const iconOfAction = (action: UserAction) =>
-  action === 'add'
+  action === 'add' || action === 're-add'
   ? faPlusCircle
   : action === 'remove'
   ? faMinusCircle
-  : faPaperPlane
+  : action === 'view'
+  ? faPaperPlane
+  : null
 
 
 
@@ -66,7 +68,7 @@ export const SituatedMessageEditor = ({
   onSubmit,
   onCancel,
 }: {
-  action: UserAction, //'add' | 'remove' | 'view'
+  action: UserAction,
   onSubmit: (message: string) => Promise<boolean>,
   onCancel: () => void,
 }) => {
@@ -94,12 +96,16 @@ export const SituatedMessageEditor = ({
     ? 'Add'
     : action === 'remove'
     ? 'Remove'
+    : action === 're-add'
+    ? 'Re-add'
     : 'Post' // send? submit? comment?
   
   const placeholderText = action === 'add'
     ? 'Explain why you want to add this track... (optional)'
     : action === 'remove'
     ? 'Explain why you want to remove this track... (optional)'
+    : action === 're-add'
+    ? 'Explain why you want to add this track back... (optional)'
     : 'Comment on this track...'
   
   return <>
diff --git a/client/src/Playlist-Editor/Chat/SituatedChat.tsx b/client/src/Playlist-Editor/Chat/SituatedChat.tsx
index ab63bce..28df403 100644
--- a/client/src/Playlist-Editor/Chat/SituatedChat.tsx
+++ b/client/src/Playlist-Editor/Chat/SituatedChat.tsx
@@ -4,8 +4,8 @@ import { classes } from '../../styles'
 import * as styles from '../playlistTableRowStyles'
 import { State } from '../modificationReducer'
 import { SituatedMessageEditor } from './MessageEditor'
-import { PlaylistTrackObject } from '../../shared/apiTypes'
 import { SituatedChatMessage } from './ChatMessage'
+import { SituatedChatEvent } from '../../shared/dbTypes'
 
 
 const chatStyle = {
@@ -16,13 +16,13 @@ const chatStyle = {
 
 
 export const SituatedChat = ({
-  track,
+  chat,
   action,
   onSubmit,
   onCancel,
 }: {
-  track: PlaylistTrackObject,
-  action: State['userAction'], //'add' | 'remove' | 'view'
+  chat: SituatedChatEvent[],
+  action: State['userAction'],
   onSubmit: (message: string) => Promise<boolean>,
   onCancel: () => void,
 }) => {
@@ -35,7 +35,7 @@ export const SituatedChat = ({
     </div>
     <div style={chatStyle}>
       <div style={classes.column}>
-        { track.chat.map((chatEvent, index) =>
+        { chat.map((chatEvent, index) =>
           <SituatedChatMessage chatEvent={chatEvent} key={index} />
         ) }
       </div>
diff --git a/client/src/Playlist-Editor/DraftAdditionSongRow.tsx b/client/src/Playlist-Editor/DraftAdditionSongRow.tsx
index e4f02b9..0a413fd 100644
--- a/client/src/Playlist-Editor/DraftAdditionSongRow.tsx
+++ b/client/src/Playlist-Editor/DraftAdditionSongRow.tsx
@@ -12,6 +12,7 @@ import { PlaylistTrackObject, PostTrackRequest } from '../shared/apiTypes'
 import { handleApiError } from '../api'
 import { postWrapper } from '../fetchWrapper'
 import { useParams } from 'react-router'
+import { asType } from '../util'
 
 
 /**
@@ -28,12 +29,9 @@ export const DraftAdditionSongRow = ({
   const track: PlaylistTrackObject = {
     ...trackData,
     chat: [],
-    removed: false,
     addedBy: 'You', // supposed to be an id, idk whether to use user's id
   }
   
-  const artistNames = track.artists.map(artist => artist.name).join(', ')
-  
   const { setModificationState, loadPlaylist } = useContext(playlistContext)
   const { id: playlistId } = useParams()
   
@@ -42,10 +40,10 @@ export const DraftAdditionSongRow = ({
   const onSubmit = async (message: string) => {
     const response = await postWrapper(
       `/api/playlists/${playlistId}/tracks`,
-      {
+      asType<PostTrackRequest>({
         message,
         trackId: track.id
-      } as PostTrackRequest,
+      }),
     )
     handleApiError(response)
     
@@ -80,8 +78,8 @@ export const DraftAdditionSongRow = ({
     <div style={styles.rowStyle}>
       <div style={styles.expandCollapseButtonStyle}></div>
       <div style={styles.titleStyle}>{track.name}</div>
-      <div style={styles.artistStyle}>{artistNames}</div>
-      <div style={styles.albumStyle}>{track.album.name}</div>
+      <div style={styles.artistStyle}>{track.artists}</div>
+      <div style={styles.albumStyle}>{track.album}</div>
       <div style={styles.addedByStyle}>{track.addedBy}</div>
       <div style={styles.rightButtonWrapperStyle}>
         <button
@@ -94,7 +92,7 @@ export const DraftAdditionSongRow = ({
       </div>
     </div>
     <SituatedChat
-      track={track}
+      chat={track.chat}
       action={'add'}
       onSubmit={onSubmit}
       onCancel={onCancel}
diff --git a/client/src/Playlist-Editor/PlaylistEditor.tsx b/client/src/Playlist-Editor/PlaylistEditor.tsx
index 9d55bad..cbd3400 100644
--- a/client/src/Playlist-Editor/PlaylistEditor.tsx
+++ b/client/src/Playlist-Editor/PlaylistEditor.tsx
@@ -8,7 +8,7 @@ import { classes, colors } from '../styles'
 import { SavedSongRow } from './SavedSongRow'
 import { DraftAdditionSongRow } from './DraftAdditionSongRow'
 // import { TableHeader } from './TableHeader'
-import { PlaylistTableHeader } from './PlaylistTableHeader'
+import { PlaylistTableHeader, RemovedTracksHeader } from './PlaylistTableHeader'
 import { PlaylistInfo } from './PlaylistInfo'
 import { SearchPanel } from './SearchPanel'
 import { initialState } from './modificationReducer'
@@ -16,6 +16,7 @@ import { playlistContext } from './playlistContext'
 import { SeparateChat } from './Chat/SeparateChat'
 import { GetPlaylistIdResponse } from '../shared/apiTypes'
 import { handleApiError } from '../api'
+import { RemovedTrackRow } from './RemovedTrackRow'
 
 
 const usePlaylistData = (playlistId: string) => {
@@ -78,6 +79,7 @@ const usePlaylistData = (playlistId: string) => {
 
 
 
+const padding = '2.0rem'
 
 const searchTabStyle = {
   flex: 0.2,
@@ -95,12 +97,23 @@ const playlistTableStyle = {
 }
 const tHeadStyle = {
   background: colors.grayscale.gray,
-  padding: '2.0rem 2.0rem 0',
+  padding: `${padding} ${padding} 0`,
   position: 'sticky',
   top: 0,
 } as const
 const songsStyle = {
-  padding: '0 2.0rem 2.0rem',
+  padding: `0 ${padding}`,
+}
+const removedHeaderStyle = {
+  padding: `4.0rem ${padding} 0`,
+}
+const removedHeadingStyle = {
+  ...classes.text,
+  ...classes.bold,
+  fontSize: '2.4rem',
+}
+const bottomSpaceStyle: CSSProperties = {
+  minHeight: '5.0rem',
 }
 const separateChatStyle = {
   flex: 1,
@@ -157,6 +170,18 @@ export const PlaylistEditor = ({
                 <DraftAdditionSongRow trackData={modificationState.trackData} />
               }
             </div>
+            { playlist.data.removedTracks.length && <>
+              <div style={removedHeaderStyle}>
+                <h3 style={removedHeadingStyle}>Removed Tracks</h3>
+                <RemovedTracksHeader />
+              </div>
+              <div style={songsStyle}>
+                { playlist.data.removedTracks.map(track =>
+                  <RemovedTrackRow track={track} key={track.id} />
+                )}
+              </div>
+            </>}
+            <div style={bottomSpaceStyle} />
           </> }
         </div>
         { false && <SeparateChat
diff --git a/client/src/Playlist-Editor/PlaylistInfo.tsx b/client/src/Playlist-Editor/PlaylistInfo.tsx
index b8933bd..a3fe272 100644
--- a/client/src/Playlist-Editor/PlaylistInfo.tsx
+++ b/client/src/Playlist-Editor/PlaylistInfo.tsx
@@ -30,13 +30,6 @@ const titleStyle: CSSProperties = {
   ...classes.bold,
   fontSize: '3.8rem',
 }
-const subtitleStyle = {
-  ...classes.text,
-  color: colors.grayscale.lightText,
-}
-const ownerStyle = {
-  color: colors.grayscale.white,
-}
 const followersStyle = {
   ...classes.text,
   color: colors.grayscale.lightText,
@@ -57,25 +50,19 @@ export const PlaylistInfo = ({
   
   return <div style={containerStyle}>
     <img
-      src={playlist.images[0].url}
+      src={playlist.image}
       alt={playlist.name}
       style={imageStyle}
     />
     <div style={middleContainerStyle}>
       <h2 style={titleStyle}>{playlist.name}</h2>
-      <p style={subtitleStyle}>
-        Created by{' '}
-        <span style={ownerStyle}>
-          {playlist.owner.display_name}
-        </span>
+      <p style={followersStyle}>
+        <span style={followersCountStyle}>
+          {playlist.followers}
+        </span>{' '}
+        Follower{playlist.followers !== 1 && 's'}
       </p>
     </div>
-    <span style={followersStyle}>
-      <span style={followersCountStyle}>
-        {playlist.followers.total}
-      </span>{' '}
-      Follower{playlist.followers.total !== 1 && 's'}
-    </span>
   </div>
 }
 
diff --git a/client/src/Playlist-Editor/PlaylistTableHeader.tsx b/client/src/Playlist-Editor/PlaylistTableHeader.tsx
index b6d1f1d..df0cf3c 100644
--- a/client/src/Playlist-Editor/PlaylistTableHeader.tsx
+++ b/client/src/Playlist-Editor/PlaylistTableHeader.tsx
@@ -28,3 +28,22 @@ export const PlaylistTableHeader = () => {
   </div>
 }
 
+export const RemovedTracksHeader = () => {
+  return <div style={styles.rowStyle}>
+    <div style={styles.expandCollapseButtonStyle}></div>
+    <div style={styles.titleStyle}>
+      Title
+    </div>
+    <div style={styles.artistStyle}>
+      Artist
+    </div>
+    <div style={styles.albumStyle}>
+      Album
+    </div>
+    <div style={styles.addedByStyle}>
+      Removed by
+    </div>
+    <div style={styles.rightButtonWrapperStyle}></div>
+  </div>
+}
+
diff --git a/client/src/Playlist-Editor/RemovedTrackRow.tsx b/client/src/Playlist-Editor/RemovedTrackRow.tsx
new file mode 100644
index 0000000..1b8977a
--- /dev/null
+++ b/client/src/Playlist-Editor/RemovedTrackRow.tsx
@@ -0,0 +1,145 @@
+
+import React, { useContext, useState } from 'react'
+import { useParams } from 'react-router'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronCircleDown, faChevronCircleUp, faPlusCircle } from '@fortawesome/free-solid-svg-icons'
+import { handleApiError } from '../api'
+import { postWrapper } from '../fetchWrapper'
+import { PostSituatedChatRequest, PutTrackRemovedRequest } from '../shared/apiTypes'
+import { RemovedTrackObject } from '../shared/dbTypes'
+import { classes, colors } from '../styles'
+import { useHover } from '../useHover'
+import { asType } from '../util'
+import { playlistContext } from './playlistContext'
+import * as styles from './playlistTableRowStyles'
+import { SituatedChat } from './Chat/SituatedChat'
+
+
+export const RemovedTrackRow = ({ track }: { track: RemovedTrackObject }) => {
+  
+  const {
+    modificationState, setModificationState, loadPlaylist
+  } = useContext(playlistContext)
+  
+  const { id: playlistId } = useParams()
+  
+  // true if user is attempting to re-add *this* track; else the user is just
+  //  viewing or commenting on this track
+  const reAddingThis = modificationState.userAction === "re-add"
+    && modificationState.trackId === track.id
+  
+  // situated chat expand/collapse button
+  const [chatExpanded, setChatExpanded] = useState(false)
+  
+  // button hover states
+  const [expandButtonIsHovered, expandButtonHoverProps] = useHover()
+  const [reAddButtonIsHovered, reAddButtonHoverProps, setReAddButtonIsHovered] = useHover()
+  
+  
+  // on click the right-most "re-add" button
+  const reAddButtonOnClick = () => {
+    setModificationState({
+      userAction: 're-add',
+      trackId: track.id,
+    })
+    setReAddButtonIsHovered(false) // otherwise, stays hovered if cancelled
+  }
+  
+  // on submit the chat form
+  const onSubmitChat = async (message: string) => {
+    const response = reAddingThis
+      ? await postWrapper(
+          `/api/playlists/${playlistId}/tracks/${track.id}/removed/`,
+          asType<PutTrackRemovedRequest>({
+            remove: false,
+            message
+          }),
+          { method: 'PUT' }
+        )
+      : await postWrapper(
+          `/api/playlists/${playlistId}/tracks/${track.id}/chat/`,
+          asType<PostSituatedChatRequest>({ message }),
+        )
+    handleApiError(response)
+    
+    if (!response.error) {
+      // just resets modification state to 'view'
+      setModificationState({ userAction: 'view' })
+      // reload playlist to get updated tracks/chats
+      loadPlaylist()
+      // inform caller of success; this clears the textarea
+      return true
+    }
+    return false
+  }
+  // on cancel the chat form
+  const onCancelChat = () => {
+    if (reAddingThis) {
+      setModificationState({ userAction: 'view' })
+    } else {
+      setChatExpanded(false)
+    }
+  }
+  
+  
+  
+  const expandButtonStyle = {
+    ...styles.rightButtonStyle,
+    background: colors.translucentWhite(expandButtonIsHovered ? 0.3 : 0.15),
+  }
+  const rightButtonStyle = {
+    ...styles.rightButtonStyle,
+    background: colors.translucentWhite(reAddButtonIsHovered ? 0.3 : 0.15),
+  }
+  
+  return <div style={classes.column}>
+    <div style={styles.rowStyle}>
+      <div style={styles.rightButtonWrapperStyle}>
+        {/* only show expand/collapse button if not currently re-adding this track */}
+        { !reAddingThis &&
+          <button
+            style={expandButtonStyle}
+            onClick={() => setChatExpanded(currState => !currState)}
+            {...expandButtonHoverProps}
+          >
+            <FontAwesomeIcon
+              icon={ chatExpanded
+                ? faChevronCircleUp
+                : faChevronCircleDown
+              }
+              style={classes.icon}
+            />
+          </button>
+        }
+      </div>
+      <div style={styles.titleStyle}>{track.name}</div>
+      <div style={styles.artistStyle}>{track.artists}</div>
+      <div style={styles.albumStyle}>{track.album}</div>
+      <div style={styles.addedByStyle}>{track.removedBy}</div>
+      <div style={styles.rightButtonWrapperStyle}>
+        {/* only provide the re-add button as an option if no other track is
+            currently selected for modification */}
+        { modificationState.userAction === "view" &&
+          <button
+            style={rightButtonStyle}
+            onClick={reAddButtonOnClick}
+            {...reAddButtonHoverProps}
+          >
+            <FontAwesomeIcon icon={faPlusCircle} style={classes.icon} />
+          </button>
+        }
+      </div>
+    </div>
+    {/* only show chat if this track is selected for re-adding or chat is expanded */}
+    { (reAddingThis || chatExpanded) &&
+      <SituatedChat
+        chat={track.chat}
+        // re-add action 'overrides' view; if both are true, re-add is shown
+        action={reAddingThis ? 're-add' : 'view'}
+        onSubmit={onSubmitChat}
+        onCancel={onCancelChat}
+      />
+    }
+  </div>
+}
+
diff --git a/client/src/Playlist-Editor/SavedSongRow.tsx b/client/src/Playlist-Editor/SavedSongRow.tsx
index 26f7e5a..1b6b60c 100644
--- a/client/src/Playlist-Editor/SavedSongRow.tsx
+++ b/client/src/Playlist-Editor/SavedSongRow.tsx
@@ -11,6 +11,7 @@ import { PlaylistTrackObject, PostSituatedChatRequest, PutTrackRemovedRequest }
 import { useParams } from 'react-router'
 import { postWrapper } from '../fetchWrapper'
 import { handleApiError } from '../api'
+import { asType } from '../util'
 
 
 
@@ -27,7 +28,6 @@ export const SavedSongRow = ({
   addedByUsers: Record<string, SpotifyApi.UserObjectPublic>,
 }) => {
   
-  const artistNames = track.artists.map(artist => artist.name).join(', ')
   const addedByUser = addedByUsers[track.addedBy]
   
   const {
@@ -63,12 +63,15 @@ export const SavedSongRow = ({
     const response = removingThis
       ? await postWrapper(
           `/api/playlists/${playlistId}/tracks/${track.id}/removed/`,
-          { message } as PutTrackRemovedRequest,
+          asType<PutTrackRemovedRequest>({
+            remove: true,
+            message
+          }),
           { method: 'PUT' }
         )
       : await postWrapper(
           `/api/playlists/${playlistId}/tracks/${track.id}/chat/`,
-          { message } as PostSituatedChatRequest,
+          asType<PostSituatedChatRequest>({ message }),
         )
     handleApiError(response)
     
@@ -124,8 +127,8 @@ export const SavedSongRow = ({
         }
       </div>
       <div style={styles.titleStyle}>{track.name}</div>
-      <div style={styles.artistStyle}>{artistNames}</div>
-      <div style={styles.albumStyle}>{track.album.name}</div>
+      <div style={styles.artistStyle}>{track.artists}</div>
+      <div style={styles.albumStyle}>{track.album}</div>
       <div style={styles.addedByStyle}>{addedByUser.display_name}</div>
       <div style={styles.rightButtonWrapperStyle}>
         {/* only provide the remove button as an option if no other track is
@@ -144,7 +147,7 @@ export const SavedSongRow = ({
     {/* only show chat if this track is selected for removal or chat is expanded */}
     { (removingThis || chatExpanded) &&
       <SituatedChat
-        track={track}
+        chat={track.chat}
         // remove action 'overrides' view; if both are true, removal is shown
         action={removingThis ? 'remove' : 'view'}
         onSubmit={onSubmitChat}
diff --git a/client/src/Playlist-Editor/SearchPanel.tsx b/client/src/Playlist-Editor/SearchPanel.tsx
index 03c3098..24af841 100644
--- a/client/src/Playlist-Editor/SearchPanel.tsx
+++ b/client/src/Playlist-Editor/SearchPanel.tsx
@@ -1,16 +1,15 @@
 
 import React, { useState, useEffect, CSSProperties } from 'react'
 import { useDebounceCallback } from '@react-hook/debounce'
-import { useResource, fetchWrapper, Resource } from '../fetchWrapper'
+import { useResource, fetchWrapper } from '../fetchWrapper'
 import { SearchResults } from "./SearchResults"
 import { classes, colors } from "../styles"
 import { handleApiError } from '../api'
+import { GetTrackSearchResponse } from '../shared/apiTypes'
 
 
-type SongResults = SpotifyApi.TrackSearchResponse
-
-export const useSongSearch = (query: string): Resource<SongResults> => {
-  const [resource, setter] = useResource<SongResults>(null)
+export const useSongSearch = (query: string) => {
+  const [resource, setter] = useResource<GetTrackSearchResponse>(null)
   
   useEffect(() => {
     if (query !== '') {
@@ -18,7 +17,7 @@ export const useSongSearch = (query: string): Resource<SongResults> => {
         setter({
           loading: true,
         })
-        const response = await fetchWrapper<SongResults>(`/api/search?q=${query}`)
+        const response = await fetchWrapper<GetTrackSearchResponse>(`/api/search?q=${query}`)
         handleApiError(response)
         setter({
           loading: false,
@@ -82,7 +81,7 @@ export const SearchPanel = ({
   
   const [query, setQuery] = useState('')
   
-  const { data: result } = useSongSearch(query)
+  const searchResults = useSongSearch(query)
   
   const searchTabStyle = {
     ...style,
@@ -112,10 +111,10 @@ export const SearchPanel = ({
       placeholder="Search to add track..."
     />
     
-    { result &&
+    { searchResults.data &&
       <SearchResults
         style={resultsStyle}
-        data={result}
+        searchResults={searchResults.data}
       />
     }
     
diff --git a/client/src/Playlist-Editor/SearchResults.tsx b/client/src/Playlist-Editor/SearchResults.tsx
index e036f71..22a3111 100644
--- a/client/src/Playlist-Editor/SearchResults.tsx
+++ b/client/src/Playlist-Editor/SearchResults.tsx
@@ -6,26 +6,25 @@ import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import { useHover } from '../useHover'
 import { playlistContext } from './playlistContext'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GetTrackSearchItem, GetTrackSearchResponse } from '../shared/apiTypes'
 
+const itemNotFirstStyle = {
+  marginTop: '1.0rem',
+}
 
 export const SearchResults = ({
-  data,
+  searchResults,
   style,
 }: {
-  data: SpotifyApi.TrackSearchResponse,
+  searchResults: GetTrackSearchResponse,
   style?: CSSProperties,
 }) => {
   
-  const items = data.tracks.items
-  
-  const itemNotFirstStyle = {
-    marginTop: '1.0rem',
-  }
   
   return <ScrollArea style={style}>
-    {items.map((item, index) => 
+    {searchResults.map((track, index) => 
       <SearchItem
-        item={item}
+        track={track}
         key={index}
         style={index !== 0 && itemNotFirstStyle}
       />
@@ -69,29 +68,22 @@ const addButtonStyle = {
 } as const
 
 const SearchItem = ({
-  item,
+  track,
   style,
 }: {
-  item: SpotifyApi.TrackObjectFull,
+  track: GetTrackSearchItem,
   style: CSSProperties,
 }) => {
-  const { name, artists, album } = item
-  const image = album.images[2]
-  const artistNames = artists.map(artist => artist.name).join(', ')
   
   const { modificationState, setModificationState } = useContext(playlistContext)
   
   const [addButtonIsHovered, addButtonHoverProps, setAddButtonIsHovered] = useHover()
   
   const addButtonOnClick = () => {
+    const { id, album, artists, name } = track
     setModificationState({
       userAction: 'add',
-      trackData: {
-        id: item.id,
-        album: item.album,
-        artists: item.artists,
-        name: item.name,
-      }
+      trackData: { id, album, artists, name },
     })
     setAddButtonIsHovered(false) // otherwise, stays hovered if addition is cancelled
   }
@@ -106,10 +98,10 @@ const SearchItem = ({
   }
   
   return <div style={searchItemStyle}>
-    <img src={image.url} alt={`Album: ${album.name}`} style={imageStyle} />
+    <img src={track.image} alt={`Album: ${track.album}`} style={imageStyle} />
     <div style={textDivStyle}>
-      <div style={songNameStyle}>{name}</div>
-      <div style={artistNamesStyle}>{artistNames}</div>
+      <div style={songNameStyle}>{track.name}</div>
+      <div style={artistNamesStyle}>{track.artists}</div>
     </div>
     { modificationState.userAction === 'view' &&
       <button
diff --git a/client/src/Playlist-Editor/modificationReducer.tsx b/client/src/Playlist-Editor/modificationReducer.tsx
index 9de9853..dd231c3 100644
--- a/client/src/Playlist-Editor/modificationReducer.tsx
+++ b/client/src/Playlist-Editor/modificationReducer.tsx
@@ -16,12 +16,17 @@ interface RemoveState {
   userAction: 'remove',
   trackId: string,
 }
+interface ReAddState {
+  userAction: 're-add',
+  trackId: string,
+}
 interface ViewState {
   userAction: 'view'
 }
 export type State =
   | AddState
   | RemoveState
+  | ReAddState
   | ViewState
 
 export const initialState: State = {
diff --git a/client/src/shared/apiTypes.ts b/client/src/shared/apiTypes.ts
index 61a26e9..6d22ffe 100644
--- a/client/src/shared/apiTypes.ts
+++ b/client/src/shared/apiTypes.ts
@@ -12,19 +12,17 @@ export interface GetRefreshTokenResponse {
 }
 
 
-export interface PlaylistTrackObject extends
-  TrackObject,
-  Pick<SpotifyApi.TrackObjectFull,
-    'name' | 'album' | 'artists'
-  > { }
-
-export interface GetPlaylistIdResponse extends
-  PlaylistDocument,
-  Pick<SpotifyApi.SinglePlaylistResponse,
-    'images' | 'name' | 'owner' | 'followers'
-  >
-{
+export interface PlaylistTrackObject extends TrackObject {
+  name: string,
+  album: string,
+  artists: string,
+}
+
+export interface GetPlaylistIdResponse extends PlaylistDocument {
   tracks: PlaylistTrackObject[],
+  name: string,
+  followers: number,
+  image: string,
 }
 
 
@@ -33,7 +31,8 @@ export interface PostSituatedChatRequest {
 }
 
 export interface PutTrackRemovedRequest {
-  message: string
+  remove: boolean,
+  message: string,
 }
 
 export interface PostTrackRequest {
@@ -46,9 +45,14 @@ export interface PostSeparateChatRequest {
 }
 
 
-export interface GetTrackSearchResponse extends SpotifyApi.SearchResponse {
-  
+export interface GetTrackSearchItem {
+  id: string,
+  name: string,
+  album: string,
+  artists: string,
+  image: string,
 }
+export type GetTrackSearchResponse = GetTrackSearchItem[]
 
 export interface PlaylistSimple {
   id: string,
diff --git a/client/src/shared/dbTypes.ts b/client/src/shared/dbTypes.ts
index 9686aca..3fb4dab 100644
--- a/client/src/shared/dbTypes.ts
+++ b/client/src/shared/dbTypes.ts
@@ -17,14 +17,14 @@ interface Event {
 
 
 /**
- * A user leaves a message, possibly while adding/removing a track
- * If action included, message can be empty string, otherwise message
- * shouldn't be an empty string
+ * A user leaves a message, possibly while adding/removing the track
+ * If action is not 'comment', message can be empty string, otherwise message
+ * shouldn't be an empty string, though this is not currently enforced
  * This occurs in situated or hybrid mode
  */
 export interface SituatedChatEvent extends Event {
   message: string,
-  action?: 'add' | 'remove',
+  action: 'comment' | 'add' | 'remove' | 're-add',
 }
 
 
@@ -35,8 +35,7 @@ export interface SituatedChatEvent extends Event {
  * situated mode
  */
 export interface SeparateChatAction extends Event {
-  type: 'action',
-  action: 'add' | 'remove',
+  action: 'add' | 'remove' | 're-add',
   trackId: string,
 }
 /**
@@ -44,7 +43,7 @@ export interface SeparateChatAction extends Event {
  * Occurs in separate or hybrid mode
  */
 export interface SeparateChatMessage extends Event {
-  type: 'message',
+  action: 'comment',
   message: string,
 }
 /**
@@ -54,8 +53,7 @@ export type SeparateChatEvent = SeparateChatAction | SeparateChatMessage
 
 
 /**
- * track in playlist; keeps track of whether it has been removed or not (or
- * readded)
+ * track in playlist that has either not been removed, or has been readded
  * Chat can be empty array if no messages/actions yet or if in separate mode
  */
 export interface TrackObject {
@@ -67,7 +65,22 @@ export interface TrackObject {
   // always be the adder in spotify's data:
   addedBy: string,
   chat: SituatedChatEvent[], // situated
-  removed: boolean,
+}
+
+/**
+ * Similar to TrackObject, but keeps track of who removed it
+ * And saves data that is normally fetched from spotify's copy of the playlist
+ */
+export interface RemovedTrackObject {
+  id: string,
+  // user id of remover
+  removedBy: string,
+  chat: SituatedChatEvent[], // situated
+  
+  // cached from spotify:
+  name: string,
+  album: string,
+  artists: string,
 }
 
 /**
@@ -77,6 +90,7 @@ export interface TrackObject {
 export interface PlaylistDocument extends Document {
   users: string[], // many-to-many
   tracks: TrackObject[],
+  removedTracks: RemovedTrackObject[],
   chat: SeparateChatEvent[], // separate
   chatMode: 'situated' | 'separate' | 'hybrid',
 }
diff --git a/client/src/util.ts b/client/src/util.ts
new file mode 100644
index 0000000..dd3b46f
--- /dev/null
+++ b/client/src/util.ts
@@ -0,0 +1,13 @@
+
+
+/**
+ * static type assertion
+ * makes the compiler check that the argument is of type T; get autocompletion
+ *  hints in a much safer way than `as` type casting that gives proper errors
+ *  for missing, mismatched, or extraneous properties
+ * source: https://github.com/microsoft/TypeScript/issues/7481
+ */
+export const asType = <T> (t: T): T => t
+
+
+
diff --git a/src/initializePlaylist.ts b/src/initializePlaylist.ts
index 0e7b60e..382f2a1 100644
--- a/src/initializePlaylist.ts
+++ b/src/initializePlaylist.ts
@@ -19,7 +19,8 @@ export const initializePlaylist = async (
     users: config.userIds,
     chat: [],
     tracks: spotifyPlaylist.tracks.items.map(initializeTrackObject),
-  }) as PlaylistDocument
+    removedTracks: [],
+  })
 }
 
 
@@ -32,7 +33,6 @@ const initializeTrackObject = (spotifyTrack: SpotifyApi.PlaylistTrackObject): Tr
   return {
     id: spotifyTrack.track.id,
     chat: [],
-    removed: false,
     addedBy: spotifyTrack.added_by.id, // TODO will always be wrong, wont-fix?
   }
 }
diff --git a/src/routes/api/index.ts b/src/routes/api/index.ts
index 2cab409..a87d2c6 100644
--- a/src/routes/api/index.ts
+++ b/src/routes/api/index.ts
@@ -4,10 +4,11 @@ import SpotifyWebApi from 'spotify-web-api-node'
 import express from 'express'
 import { LocalsUserId, Res, playlistsRouter } from './playlists'
 import {
-  GetRefreshTokenResponse, GetTrackSearchResponse, GetLoginResponse
+  GetRefreshTokenResponse, GetTrackSearchResponse, GetLoginResponse, GetTrackSearchItem
 } from '../../../client/src/shared/apiTypes'
 import { accessTokenCache, refreshTokenCache } from '../../userCache'
 import { spotifyApi } from '../../ownerAccount'
+import { asType } from '../../util'
 
 
 
@@ -52,7 +53,7 @@ apiRouter.get('/refresh_token', async (req, res, next) => {
   accessTokenCache.set(data.body.access_token, userId)
   
   res.cookie('access_token', data.body.access_token, { maxAge: data.body.expires_in * 1000 })
-  res.json({ expires_in: data.body.expires_in } as GetRefreshTokenResponse)
+  res.json(asType<GetRefreshTokenResponse>({ expires_in: data.body.expires_in }))
 })
 
 
@@ -78,7 +79,7 @@ apiRouter.use((req, res: Res<LocalsUserId>, next) => {
  * json body if not logged in
  */
 apiRouter.get('/login', (req, res: Res<LocalsUserId>, next) => {
-  res.json({ userId: res.locals.userId } as GetLoginResponse)
+  res.json(asType<GetLoginResponse>({ userId: res.locals.userId }))
 })
 
 
@@ -95,9 +96,18 @@ apiRouter.use('/playlists', playlistsRouter)
 apiRouter.get('/search', async (req, res) => {
   const { q } = req.query
   
-  const data = await spotifyApi.searchTracks(q)
+  const { body: results } = await spotifyApi.searchTracks(q)
   
-  res.json(data.body as GetTrackSearchResponse)
+  res.json(asType<GetTrackSearchResponse>(
+    results.tracks.items.map(track => asType<GetTrackSearchItem>({
+      id: track.id,
+      name: track.name,
+      album: track.album.name,
+      // images[2]?
+      image: (track.album.images[2] ?? track.album.images[0]).url,
+      artists: track.artists.map(artist => artist.name).join(', '),
+    }))
+  ))
 })
 
 
@@ -140,13 +150,13 @@ apiRouter.get('/users/:id', async (req, res) => {
 /**
  * catch server errors
  */
-apiRouter.use(((err, req, res, next) => {
+apiRouter.use(asType<express.ErrorRequestHandler>((err, req, res, next) => {
   console.error(`ERROR at ${req.method} ${req.originalUrl}:`)
   console.error(err)
   // always respond with json; never send err (might leak server info)
   res.status(err.status ?? 500)
      .json({}) // could use `err.client ?? {}`
-}) as express.ErrorRequestHandler)
+}))
 
 
 /**
diff --git a/src/routes/api/playlists.ts b/src/routes/api/playlists.ts
index 0728821..eae62ed 100644
--- a/src/routes/api/playlists.ts
+++ b/src/routes/api/playlists.ts
@@ -7,14 +7,17 @@ import {
   SeparateChatMessage,
   SeparateChatAction,
   PlaylistDocument,
+  RemovedTrackObject,
 } from '../../../client/src/shared/dbTypes'
 import {
   GetPlaylistIdResponse, PostSituatedChatRequest, PutTrackRemovedRequest,
   PostTrackRequest, PostSeparateChatRequest, GetPlaylistsResponse,
-  PlaylistSimple
+  PlaylistSimple,
+  PlaylistTrackObject
 } from '../../../client/src/shared/apiTypes'
 import { spotifyApi } from '../../ownerAccount'
 import { playlistsDB, usersDB } from '../../db'
+import { asType } from '../../util'
 
 
 
@@ -111,23 +114,23 @@ playlistIdRouter.get('/',
       // urls or names that can change
       const response: GetPlaylistIdResponse = {
         ...res.locals.dbPlaylist,
-        images: spotifyPlaylist.images,
+        // if multiple images present, i think image [1] has the closest resolution;
+        // else use the only image
+        image: (spotifyPlaylist.images[1] ?? spotifyPlaylist.images[0]).url,
         name: spotifyPlaylist.name,
-        owner: spotifyPlaylist.owner,
-        followers: spotifyPlaylist.followers,
+        followers: spotifyPlaylist.followers.total,
         tracks: res.locals.dbPlaylist.tracks
-          .filter(dbTrack => !dbTrack.removed)
           .map(dbTrack => {
             const spotifyTrack = spotifyPlaylist.tracks.items
               .find(spotifyTrack => spotifyTrack.track.id === dbTrack.id)
               .track
             
-            return {
+            return asType<PlaylistTrackObject>({
               ...dbTrack,
-              album: spotifyTrack.album,
-              artists: spotifyTrack.artists,
+              album: spotifyTrack.album.name,
+              artists: spotifyTrack.artists.map(artist => artist.name).join(', '),
               name: spotifyTrack.name,
-            }
+            })
           })
       }
       
@@ -156,11 +159,12 @@ playlistIdRouter.post('/tracks/:trackId/chat/',
       await playlistsDB.update(
         { _id: playlistId },
         { $push: { [`tracks.${dbTrackIndex}.chat`]:
-          {
+          asType<SituatedChatEvent>({
+            action: 'comment',
             message,
             timestamp: new Date(),
             userId: res.locals.userId,
-          } as SituatedChatEvent
+          })
         } }
       )
       
@@ -172,47 +176,101 @@ playlistIdRouter.post('/tracks/:trackId/chat/',
 )
 
 /**
- * Remove existing song in playlist
+ * Remove existing track in playlist or re-add after previously removing
  * Removal is not a DELETE; it's gone from spotify, but our
  * backend remembers the chat history
  * Body should include a message, but it can be an empty string
+ * Body should include a boolean 'remove' that is true if the track is already
+ *  present, or false if the track is already removed
  */
 playlistIdRouter.put('/tracks/:trackId/removed',
   async (req, res: Res<LocalsDBPlaylist & LocalsUserId>, next) => {
     try {
-      const { message } = req.body as PutTrackRemovedRequest
+      const { message, remove } = req.body as PutTrackRemovedRequest
       const { playlistId, trackId } = req.params
-      console.log({message, playlistId, trackId})
+      console.log({message, remove, playlistId, trackId})
       
-      await spotifyApi.removeTracksFromPlaylist(
-        playlistId, [{ uri: `spotify:track:${trackId}` }]
-      )
+      // TODO illegal state checks? e.g. is track present in the correct list
+      //  (removed vs not removed). also json body checks?
       
-      const dbTrackIndex = res.locals.dbPlaylist.tracks.findIndex(
-        track => track.id === trackId
+      // start fetching track now if removing
+      let spotifyTrackPromise: Promise<SpotifyApi.SingleTrackResponse> | undefined
+      if (remove) {
+        // get spotify data needed to save a local copy of this track
+        spotifyTrackPromise = spotifyApi.getTrack(trackId).then(res => res.body)
+        
+        await spotifyApi.removeTracksFromPlaylist(
+          playlistId, [{ uri: `spotify:track:${trackId}` }]
+        )
+      } else {
+        await spotifyApi.addTracksToPlaylist(
+          playlistId, [`spotify:track:${trackId}`]
+        )
+      }
+      
+      
+      // we are now going to mutate dbPlaylist and update the whole db document
+      //  because nedb doesn't have support for the specific array operations we
+      //  need (also js doesn't have great immutable array methods so we use
+      //  mutation)
+      
+      const dbPlaylist = res.locals.dbPlaylist
+      
+      // list we're moving the track from
+      const listFrom = remove ? dbPlaylist.tracks : dbPlaylist.removedTracks
+      
+      const dbTrackIndex = listFrom.findIndex(
+        (track: TrackObject | RemovedTrackObject) => track.id === trackId
       )
+      // TODO check track is present in listFrom
+      
+      // remove and get track object
+      const [trackObject] = listFrom.splice(dbTrackIndex, 1)
+      
+      // add chat messages
+      trackObject.chat.push(asType<SituatedChatEvent>({
+        message,
+        timestamp: new Date(),
+        userId: res.locals.userId,
+        action: remove ? 'remove' : 're-add',
+      }))
+      dbPlaylist.chat.push(asType<SeparateChatAction>({
+        action: remove ? 'remove' : 're-add',
+        timestamp: new Date(),
+        userId: res.locals.userId,
+        trackId: trackId,
+      }))
+      
+      if (remove) {
+        const spotifyTrack = await spotifyTrackPromise
+        // convert track to removed track type
+        const removedTrackObject: RemovedTrackObject = {
+          id: trackObject.id,
+          chat: trackObject.chat,
+          removedBy: res.locals.userId,
+          // cached spotify data
+          album: spotifyTrack.album.name,
+          artists: spotifyTrack.artists.map(artist => artist.name).join(', '),
+          name: spotifyTrack.name,
+        }
+        // add removed track to start of "removed" list, will show up at the top
+        //  of the removed section of the table on the frontend
+        dbPlaylist.removedTracks.unshift(removedTrackObject)
+      } else {
+        // convert
+        const newTrackObject: TrackObject = {
+          id: trackObject.id,
+          chat: trackObject.chat,
+          addedBy: res.locals.userId,
+        }
+        // add track to end of list to reflect position in spotify playlist
+        dbPlaylist.tracks.push(newTrackObject)
+      }
+      
+      // replace the whole document with the new object; _id is unchanged
       await playlistsDB.update(
         { _id: playlistId },
-        {
-          $push: {
-            [`tracks.${dbTrackIndex}.chat`]: {
-              message,
-              timestamp: new Date(),
-              userId: res.locals.userId,
-              action: 'remove',
-            } as SituatedChatEvent,
-            chat: {
-              type: 'action',
-              action: 'remove',
-              trackId,
-              timestamp: new Date(),
-              userId: res.locals.userId,
-            } as SeparateChatAction,
-          },
-          $set: {
-            [`tracks.${dbTrackIndex}.removed`]: true
-          }
-        }
+        dbPlaylist
       )
       
       res.status(200).json({})
@@ -227,14 +285,24 @@ playlistIdRouter.put('/tracks/:trackId/removed',
  * Add song to playlist
  * Body should include trackId
  * Body should include a message, but it can be an empty string
+ * responds with error 422 if track already exists in `tracks` or
+ *  `removedTracks`
  */
 playlistIdRouter.post('/tracks/',
-  async (req, res: Res<LocalsUserId>, next) => {
+  async (req, res: Res<LocalsUserId & LocalsDBPlaylist>, next) => {
     try {
       const { message, trackId } = req.body as PostTrackRequest
       const { playlistId } = req.params
       console.log({message, playlistId, trackId})
       
+      // check if track already exists
+      if (
+        (res.locals.dbPlaylist.tracks.find(track => track.id === trackId) !== undefined) ||
+        (res.locals.dbPlaylist.removedTracks.find(track => track.id === trackId) !== undefined)
+      ) {
+        return next({ status: 422 })
+      }
+      
       await spotifyApi.addTracksToPlaylist(
         playlistId, [`spotify:track:${trackId}`]
       )
@@ -243,9 +311,8 @@ playlistIdRouter.post('/tracks/',
         { _id: playlistId },
         {
           $push: {
-            tracks: {
+            tracks: asType<TrackObject>({
               id: trackId,
-              removed: false,
               addedBy: res.locals.userId,
               chat: [{
                 message,
@@ -253,14 +320,13 @@ playlistIdRouter.post('/tracks/',
                 userId: res.locals.userId,
                 action: 'add',
               }]
-            } as TrackObject,
-            chat: {
-              type: 'action',
+            }),
+            chat: asType<SeparateChatAction>({
               action: 'add',
               trackId,
               timestamp: new Date(),
               userId: res.locals.userId,
-            } as SeparateChatAction
+            })
           }
         }
       )
@@ -288,12 +354,12 @@ playlistIdRouter.post('/chat/',
       await playlistsDB.update(
         { _id: playlistId },
         { $push: { chat:
-          {
-            type: 'message',
+          asType<SeparateChatMessage>({
+            action: 'comment',
             message,
             timestamp: new Date(),
             userId: res.locals.userId,
-          } as SeparateChatMessage
+          })
         } }
       )
       
diff --git a/src/server.ts b/src/server.ts
index f57e658..c8b410a 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -64,6 +64,7 @@ import { apiRouter } from './routes/api'
 app.use('/api', apiRouter)
 
 import { adminRouter } from './routes/admin'
+import { asType } from './util'
 app.use('/admin', adminRouter)
 
 
@@ -112,11 +113,11 @@ app.get('/*', (req, res) => {
 /**
  * Error handler
  */
-app.use(((err, req, res, next) => {
+app.use(asType<express.ErrorRequestHandler>((err, req, res, next) => {
   console.error(`ERROR at ${req.method} ${req.originalUrl}:`)
   console.error(err)
   res.sendStatus(err.status ?? 500)
-}) as express.ErrorRequestHandler)
+}))
 
 
 app.listen(PORT, () => {
diff --git a/src/util.ts b/src/util.ts
new file mode 100644
index 0000000..dd3b46f
--- /dev/null
+++ b/src/util.ts
@@ -0,0 +1,13 @@
+
+
+/**
+ * static type assertion
+ * makes the compiler check that the argument is of type T; get autocompletion
+ *  hints in a much safer way than `as` type casting that gives proper errors
+ *  for missing, mismatched, or extraneous properties
+ * source: https://github.com/microsoft/TypeScript/issues/7481
+ */
+export const asType = <T> (t: T): T => t
+
+
+