diff --git a/static/css/s2.css b/static/css/s2.css
index 787414dd2f..90b2141471 100644
--- a/static/css/s2.css
+++ b/static/css/s2.css
@@ -1055,8 +1055,6 @@ div.interfaceLinks-row a {
   background-color: rgba(1, 1, 1, 0.7);
 }
 .dialogModal {
-  width: 400px;
-  height: 388px;
   top: 129px;
   border: none;
   background: transparent;
@@ -5701,7 +5699,6 @@ body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus
   cursor: pointer;
   display: block;
   background-color: inherit;
-  margin-bottom: 14px;
 }
 .continuous .segment {
   display: inline;
@@ -5884,28 +5881,13 @@ body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus
   background-color: #444;
 }
 .basetext .segment.highlight,
-.sheetContent .segment.highlight .en,
-.sheetContent .segment.highlight .he,
-.sheetContent .textPreviewSegment.highlight,
 .editTextInfo .textPreviewSegment.highlight,
-.readerPanel.bilingual.heLeft .sheetContent .segment.highlight,
-.readerPanel.bilingual.heRight .sheetContent .segment.highlight,
 .editorContent .sheetItem.highlight,
 .editorContent .sheetItem.highlight .SheetSource .en,
 .editorContent .sheetItem.highlight .SheetSource::after
 {
   background-color: #F0F7FF;
 }
-.sheetContent .segment.highlight .linkCount .en,
-.sheetContent .segment.highlight .linkCount .he,
-.sheetContent .segment.highlight .segmentNumber .en,
-.sheetContent .segment.highlight .segmentNumber .he {
-  background-color: transparent;
-}
-.sheetContent .segment.highlight .en div,
-.sheetContent .segment.highlight .he div {
-  background-color: inherit;
-}
 .sheetContent .segment a {
   color: #4B71B7;
   cursor: pointer;
@@ -5913,21 +5895,14 @@ body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus
 .sheetContent .segment .sourceContentText a {
   text-decoration: underline;
 }
-.readerPanel.bilingual.stacked .sheetContent .segment.highlight .he {
-  padding-bottom: 1px;
-}
 .basetext .segment.highlight .segmentNumber,
-.basetext .segment.highlight .linkCount,
-.sheetContent .segment.highlight .linkCount,
-.sheetContent .segment.highlight .segmentNumber {
+.basetext .segment.highlight .linkCount {
   background-color: transparent;
 }
-.sepia .basetext .segment.highlight,
-.sepia .sheetContent .segment.highlight {
+.sepia .basetext .segment.highlight {
   background-color: #E3E3E1;
 }
-.dark .basetext .segment.highlight,
-.dark .sheetContent .segment.highlight {
+.dark .basetext .segment.highlight {
   background-color: #444;
 }
 .textRange {
@@ -10268,6 +10243,38 @@ span.purim-emoji img{
     padding: 130px 0;
   }
 }
+.sheetContent .addToSheetPlus {
+	display: inline-flex;
+	justify-content: center;
+	align-items: flex-end;
+	width: 25px;
+	height: 25px;
+	background-color: green;
+	border-radius: 50%;
+	color: white;
+	font-size: 30px;
+	line-height: 1;
+	cursor: pointer;
+}
+.SheetOutsideBiText .addToSheetButton, .SheetSource .addToSheetButton {
+  margin-inline-start: 15px;
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+}
+.SheetComment .addToSheetButton, .SheetOutsideText .addToSheetButton {
+  margin-block-start: -10px;
+  margin-block-end: 30px;
+}
+.sheetContent .addToSheetText {
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18.75px;
+  color: var(--dark-grey);
+  margin-inline-start: 10px;
+  cursor: pointer;
+}
 @media screen and (min-width: 900px) {
   .contentInner .table {
     display: flex;
@@ -10908,21 +10915,11 @@ section.SheetOutsideBiText {
 .interface-hebrew section.SheetOutsideBiText .sheetItem > .en {
   padding: 15px 16px 15px 20px;
 }
-.readerPanel.bilingual.stacked .sheetContent section.SheetSource .segment.highlight .he,
-.readerPanel.bilingual.stacked .sheetContent section.SheetOutsideBiText .segment.highlight .he {
-  padding-bottom: 15px;
-}
-section.SheetSource.highlight,
-section.SheetOutsideBiText.highlight {
-  background-color: #E9E9E7;
-}
 section.SheetSource .segmentNumber,
 section.SheetSource .SheetOutsideBiText {
   display: none;
 }
-.sheetContent section.SheetSource.highlight .sheetItem.segment.highlight .sourceContentText,
 .sheetContent section.SheetSource .sheetItem.segment .sourceContentText,
-.sheetContent section.SheetOutsideBiText.highlight .sheetItem.segment.highlight .sourceContentText,
 .sheetContent section.SheetOutsideBiText .sheetItem.segment .sourceContentText {
   margin: 0;
 }
diff --git a/static/js/AddToSourceSheet.jsx b/static/js/AddToSourceSheet.jsx
index 3b456e1a11..76a2285632 100644
--- a/static/js/AddToSourceSheet.jsx
+++ b/static/js/AddToSourceSheet.jsx
@@ -299,7 +299,7 @@ class AddToSourceSheetBox extends Component {
           <span className="int-en noselect">Add to Sheet</span>
           <span className="int-he noselect">הוספה לדף המקורות</span>
         </div>
-        <GDocAdvertBox/>
+        {!this.props.hideGDocAdvert && <GDocAdvertBox/>}
       </div>);
   }
 }
diff --git a/static/js/ReaderPanel.jsx b/static/js/ReaderPanel.jsx
index 0c5ad70e42..aaa72f5b77 100644
--- a/static/js/ReaderPanel.jsx
+++ b/static/js/ReaderPanel.jsx
@@ -692,6 +692,7 @@ class ReaderPanel extends Component {
           key={"sheet-"+this.state.sheetID}
           multiPanel={this.props.multiPanel}
           highlightedNode={this.state.highlightedNode}
+          highlightedRefs={this.state.highlightedRefs}
           highlightedRefsInSheet={this.state.highlightedRefsInSheet}
           scrollToHighlighted={this.state.scrollToHighlighted}
           onRefClick={this.handleCitationClick}
diff --git a/static/js/sheets/Sheet.jsx b/static/js/sheets/Sheet.jsx
index e1deaa4afe..e67591673e 100644
--- a/static/js/sheets/Sheet.jsx
+++ b/static/js/sheets/Sheet.jsx
@@ -98,7 +98,8 @@ class Sheet extends Component {
                   onRefClick={this.props.onRefClick}
                   handleClick={this.handleClick}
                   sheetSourceClick={this.props.onSegmentClick}
-                  highlightedNode={this.props.highlightedNode}
+                  highlightedNode={this.props.highlightedNode} // for example, "3" -- the third node in the sheet
+                  highlightedRefs={this.props.highlightedRefs} // for example, ["Genesis 1:1"] or ["Sheet 4:3"] -- the actual source
                   highlightedRefsInSheet={this.props.highlightedRefsInSheet}
                   scrollToHighlighted={this.props.scrollToHighlighted}
                   editable={editable}
diff --git a/static/js/sheets/SheetContent.jsx b/static/js/sheets/SheetContent.jsx
index 5c4729e897..9a69f8db8f 100644
--- a/static/js/sheets/SheetContent.jsx
+++ b/static/js/sheets/SheetContent.jsx
@@ -1,12 +1,20 @@
-import React  from 'react';
-import ReactDOM  from 'react-dom';
-import classNames  from 'classnames';
-import Component from 'react-class'
-import $  from '../sefaria/sefariaJquery';
-import Sefaria  from '../sefaria/sefaria';
+import Component from "react-class";
+import $ from "../sefaria/sefariaJquery";
+import ReactDOM from "react-dom";
+import Sefaria from "../sefaria/sefaria";
+import {AddToSourceSheetModal} from "./SheetOptions";
 import {
-  InterfaceText, SheetMetaDataBox,
-} from '../Misc';
+  SheetComment,
+  SheetHeader,
+  SheetMedia,
+  SheetOutsideBiText,
+  SheetOutsideText,
+  SheetSource
+} from "./SheetContentSegments";
+import { useState } from "react";
+import {SheetMetaDataBox} from "../Misc";
+import React from "react";
+import {SignUpModalKind} from "../sefaria/signupModalContent";
 
 
 class SheetContent extends Component {
@@ -97,405 +105,175 @@ class SheetContent extends Component {
       }
     }
   }
-  getSources() {
-    const sources = this.props.sources.length ? this.props.sources.map(function(source, i) {
-      const highlightedRef = this.props.highlightedRefsInSheet ? Sefaria.normRefList(this.props.highlightedRefsInSheet) : null;
-      if ("ref" in source) {
-        const highlighted = this.props.highlightedNode ?
-            this.props.highlightedNode === source.node :
-              highlightedRef ?
-              Sefaria.refContains(source.ref, highlightedRef) :
-                false;
-        return (
-          <SheetSource
-            key={i}
-            source={source}
-            sourceNum={i + 1}
-            cleanHTML={this.cleanHTML}
-            sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
-            highlighted={highlighted}
-            sheetNumbered={this.props.sheetNumbered}
-          />
-        );
-      }
-
-      else if ("comment" in source) {
-        return (
-          <SheetComment
-            key={i}
-            sourceNum={i + 1}
-            source={source}
-            cleanHTML={this.cleanHTML}
-            sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
-            highlightedNode={this.props.highlightedNode}
-            sheetNumbered={this.props.sheetNumbered}
-          />
-        );
-      }
-
-      else if ("outsideText" in source) {
-        const sourceIsHeader = source["outsideText"].startsWith("<h1>");
-
-        if (sourceIsHeader) {
-          return <SheetHeader
-            key={i}
-            sourceNum={i + 1}
-            source={source}
-            sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
-            highlightedNode={this.props.highlightedNode}
-            sheetNumbered={this.props.sheetNumbered}
-          />
-        }
-
-        else {
-          return (
-            <SheetOutsideText
-              key={i}
-              sourceNum={i + 1}
-              source={source}
-              cleanHTML={this.cleanHTML}
-              sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
-              highlightedNode={this.props.highlightedNode}
-              sheetNumbered={this.props.sheetNumbered}
-           />
-          );
-        }
-      }
-
-      else if ("outsideBiText" in source) {
-        return (
-          <SheetOutsideBiText
-            key={i}
-            sourceNum={i + 1}
-            source={source}
-            cleanHTML={this.cleanHTML}
-            sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
-            highlightedNode={this.props.highlightedNode}
-            sheetNumbered={this.props.sheetNumbered}
-          />
-        );
-      }
-
-      else if ("media" in source) {
-        return (
-          <SheetMedia
-            key={i}
-            sourceNum={i + 1}
-            cleanHTML={this.cleanHTML}
-            source={source}
-            sheetSourceClick={this.props.sheetSourceClick.bind(this, source)}
-            highlightedNode={this.props.highlightedNode}
-            sheetNumbered={this.props.sheetNumbered}
-            hideImages={this.props.hideImages}
-          />
-        );
-      }
+  renderSheetSource = (source, i, addToSheetButton) => {
+    const { highlightedNode, cleanHTML, sheetSourceClick, sheetNumbered, highlightedRefsInSheet } = this.props;
+    const highlightedRef = highlightedRefsInSheet ? Sefaria.normRefList(highlightedRefsInSheet) : null;
+    const highlighted = highlightedNode
+      ? highlightedNode === source.node
+      : highlightedRef ? Sefaria.refContains(source.ref, highlightedRef) : false;
 
-    }, this) : null;
-    return sources;
-  }
-  render() {
-    const sources = this.getSources();
     return (
-      <div className="sheetContent">
-        <div className="text">
-          <SheetMetaDataBox authorStatement={this.props.authorStatement} authorUrl={this.props.authorUrl}
-                                   authorImage={this.props.authorImage} title={this.props.title}
-                                   summary={this.props.summary}
-                                   sheetOptions={this.props.sheetOptions}/>
-          <div className="textInner" onMouseUp={this.handleTextSelection} onClick={this.props.handleClick}>
-            {sources}
-          </div>
-        </div>
-
-        <div id="printFooter" style={{display:"none"}}>
-          <span className="int-en">Created with <img src="/static/img/logo.svg" /></span>
-          <span className="int-he">{Sefaria._("Created with")} <img src="/static/img/logo.svg" /></span>
-        </div>
-      </div>
-    )
-  }
-}
-
-
-class SheetSource extends Component {
-  render() {
-
-    const sectionClasses= classNames(
-      "SheetSource",
-      this.props.highlighted ? "highlight" : null,
-      this.props.source.options ? this.props.source.options.indented : null,
-    );
-
-    const containerClasses = classNames(
-      "sheetItem",
-      "segment",
-      this.props.highlighted ? "highlight" : null,
-      (this.props.source.text && this.props.source.text.en && this.props.source.text.en.stripHtml() === "...") || (this.props.source.text && (!this.props.source.text.en || !this.props.source.text.en.stripHtml())) ? "heOnly" : null,
-      (this.props.source.text && this.props.source.text.he && this.props.source.text.he.stripHtml() === "...") || (this.props.source.text && (!this.props.source.text.he || !this.props.source.text.he.stripHtml())) ? "enOnly" : null,
-      this.props.source.options && this.props.source.options.refDisplayPosition ? "ref-display-"+ this.props.source.options.refDisplayPosition : null
+      <SheetSource
+        key={i}
+        source={source}
+        sourceNum={i + 1}
+        cleanHTML={cleanHTML}
+        sheetSourceClick={() => sheetSourceClick(source)}
+        highlighted={highlighted}
+        sheetNumbered={sheetNumbered}
+        addToSheetButton={addToSheetButton}
+      />
     );
+  }
 
+  renderSheetComment = (source, i, addToSheetButton) => {
+    const { cleanHTML, sheetSourceClick, highlightedNode, sheetNumbered } = this.props;
     return (
-      <section className={sectionClasses} style={{"borderColor": Sefaria.palette.refColor(this.props.source.ref)}}>
-        <div className={containerClasses}
-          onClick={this.props.sheetSourceClick}
-          data-node={this.props.source.node}
-          aria-label={"Click to see connections to this source"}
-          tabIndex="0"
-          onKeyPress={function(e) {
-            e.charCode === 13 ? this.props.sheetSourceClick(e):null}.bind(this)
-          } >
-          {this.props.source.title ?
-          <div className="customSourceTitle" role="heading" aria-level="3">
-            <div className="titleBox">{this.props.source.title.stripHtml()}</div>
-          </div> : null}
-
-          {this.props.source.text && this.props.source.text.he && this.props.source.text.he !== "" ?
-          <div className="he">
-            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
-            <div className="ref">
-              {this.props.source.options && this.props.source.options.PrependRefWithHe ? this.props.source.options.PrependRefWithHe : null}
-              <a href={"/" + Sefaria.normRef(this.props.source.ref)}>{this.props.source.heRef}</a>
-            </div>
-            <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: (Sefaria.util.cleanHTML(this.props.source.text.he))} }></div>
-          </div> : null }
-
-          {this.props.source.text && this.props.source.text.en && this.props.source.text.en !== "" ?
-          <div className="en">
-            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
-            <div className="ref">
-              {this.props.source.options && this.props.source.options.PrependRefWithEn ? this.props.source.options.PrependRefWithEn : null}
-              <a href={"/" + Sefaria.normRef(this.props.source.ref)}>{this.props.source.ref}</a>
-            </div>
-            <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: (Sefaria.util.cleanHTML(this.props.source.text.en))} }></div>
-          </div> : null }
-
-          <div className="clearFix"></div>
-
-          {this.props.source.addedBy ?
-          <div className="addedBy">
-            <small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small>
-          </div>
-          : null }
-
-        </div>
-      </section>
+      <SheetComment
+        key={i}
+        sourceNum={i + 1}
+        source={source}
+        cleanHTML={cleanHTML}
+        sheetSourceClick={() => sheetSourceClick(source)}
+        highlightedNode={highlightedNode}
+        sheetNumbered={sheetNumbered}
+        addToSheetButton={addToSheetButton}
+      />
     );
   }
-}
 
-
-class SheetComment extends Component {
-  render() {
-    const lang = Sefaria.hebrew.isHebrew(this.props.source.comment.stripHtml().replace(/\s+/g, ' ')) ? "he" : "en";
-    const containerClasses = classNames(
-      "sheetItem",
-      "segment",
-      lang == "he" ? "heOnly" : "enOnly",
-      this.props.highlightedNode == this.props.source.node ? "highlight" : null,
-      this.props.source.options ? this.props.source.options.indented : null
+  renderSheetHeader = (source, i, addToSheetButton) => {
+    const { sheetSourceClick, highlightedNode, sheetNumbered } = this.props;
+    return (
+      <SheetHeader
+        key={i}
+        sourceNum={i + 1}
+        source={source}
+        sheetSourceClick={() => sheetSourceClick(source)}
+        highlightedNode={highlightedNode}
+        sheetNumbered={sheetNumbered}
+        addToSheetButton={addToSheetButton}
+      />
     );
+  }
 
+  renderSheetOutsideText = (source, i, addToSheetButton) => {
+    const { cleanHTML, sheetSourceClick, highlightedNode, sheetNumbered } = this.props;
     return (
-      <section className="SheetComment">
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-
-          <div className={lang}>
-              <div
-                className="sourceContentText"
-                dangerouslySetInnerHTML={{__html: Sefaria.util.cleanHTML(this.props.source.comment)}}></div>
-          </div>
-
-          <div className="clearFix"></div>
-          {this.props.source.addedBy ?
-          <div className="addedBy">
-            <small><em>
-              {Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span>
-            </em></small>
-          </div>
-          : null }
-
-        </div>
-      </section>
+      <SheetOutsideText
+        key={i}
+        sourceNum={i + 1}
+        source={source}
+        cleanHTML={cleanHTML}
+        sheetSourceClick={() => sheetSourceClick(source)}
+        highlightedNode={highlightedNode}
+        sheetNumbered={sheetNumbered}
+        addToSheetButton={addToSheetButton}
+      />
     );
   }
-}
 
-class SheetSegmentHeader extends Component {
-  render() {
-    const lang = Sefaria.hebrew.isHebrew(this.props.source.outsideText.stripHtml().replace(/\s+/g, ' ')) ? "he" : "en";
-    const containerClasses = classNames("sheetItem",
-        "segment",
-        lang == "he" ? "heOnly" : "enOnly",
-        this.props.highlightedNode === this.props.source.node ? "highlight" : null,
-        this.props.source.options ? this.props.source.options.indented : null
+  renderSheetOutsideBiText = (source, i, addToSheetButton) => {
+    const { cleanHTML, sheetSourceClick, highlightedNode, sheetNumbered } = this.props;
+    return (
+      <SheetOutsideBiText
+        key={i}
+        sourceNum={i + 1}
+        source={source}
+        clean
+        HTML={cleanHTML}
+        sheetSourceClick={() => sheetSourceClick(source)}
+        highlightedNode={highlightedNode}
+        sheetNumbered={sheetNumbered}
+        addToSheetButton={addToSheetButton}
+      />
     );
+  }
 
+  renderSheetMedia = (source, i, addToSheetButton) => {
+    const { cleanHTML, sheetSourceClick, highlightedNode, sheetNumbered, hideImages } = this.props;
     return (
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-          <div className={lang}>
-              <div className="sourceContentText"><h1><span>{this.props.source.outsideText.stripHtml()}</span></h1></div>
-          </div>
-        </div>
-    )
-
-
+      <SheetMedia
+        key={i}
+        sourceNum={i + 1}
+        cleanHTML={cleanHTML}
+        source={source}
+        sheetSourceClick={() => sheetSourceClick(source)}
+        highlightedNode={highlightedNode}
+        sheetNumbered={sheetNumbered}
+        hideImages={hideImages}
+        addToSheetButton={addToSheetButton}
+      />
+    );
   }
 
-}
+  getSources = () => {
+    const { sources } = this.props;
 
+    if (!sources.length) return null;
 
-class SheetOutsideText extends Component {
-  shouldPassClick(e) {
-    const target = e.target.closest('a')
-    if (target) {
-      return
-    }
-    else{
-      this.props.sheetSourceClick(this.props.source)
-    }
+    return sources.map((source, i) => {
+      const addToSheetButton = this.props.highlightedNode === source.node &&
+                                              <AddToSheetButton sheetID={this.props.sheetID}
+                                                                highlightedRefs={this.props.highlightedRefs}
+                                                                highlightedNode={this.props.highlightedNode}
+                                                                toggleSignUpModal={this.props.toggleSignUpModal}/>;
+      if ("ref" in source) {
+        return this.renderSheetSource(source, i, addToSheetButton);
+      } else if ("comment" in source) {
+        return this.renderSheetComment(source, i, addToSheetButton);
+      } else if ("outsideText" in source) {
+        return source.outsideText.startsWith("<h1>")
+                              ? this.renderSheetHeader(source, i, addToSheetButton)
+                              : this.renderSheetOutsideText(source, i, addToSheetButton);
+      } else if ("outsideBiText" in source) {
+        return this.renderSheetOutsideBiText(source, i, addToSheetButton);
+      } else if ("media" in source) {
+        return this.renderSheetMedia(source, i, addToSheetButton);
+      }
+    });
   }
-
   render() {
-    const lang = Sefaria.hebrew.isHebrew(this.props.source.outsideText.stripHtml().replace(/\s+/g, ' ')) ? "he" : "en";
-    const containerClasses = classNames("sheetItem",
-        "segment",
-        lang == "he" ? "heOnly" : "enOnly",
-        this.props.highlightedNode === this.props.source.node ? "highlight" : null,
-        this.props.source.options ? this.props.source.options.indented : null
-    );
-
+    const sources = this.getSources();
     return (
-      <section className="SheetOutsideText">
-        <div className={containerClasses} data-node={this.props.source.node} onClick={(e) => this.shouldPassClick(e)} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-
-          <div className={lang}>{this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
-              <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideText)} }></div>
-          </div>
-
-          <div className="clearFix"></div>
-
-          {this.props.source.addedBy ?
-          <div className="addedBy">
-            <small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small>
+      <div className="sheetContent">
+        <div className="text">
+          <SheetMetaDataBox authorStatement={this.props.authorStatement} authorUrl={this.props.authorUrl}
+                                   authorImage={this.props.authorImage} title={this.props.title}
+                                   summary={this.props.summary}
+                                   sheetOptions={this.props.sheetOptions}/>
+          <div className="textInner" onMouseUp={this.handleTextSelection} onClick={this.props.handleClick}>
+            {sources}
           </div>
-          : null }
-
         </div>
-      </section>
-    );
-  }
-}
-
-
-class SheetOutsideBiText extends Component {
-  render() {
-    const containerClasses = classNames(
-      "sheetItem",
-      "segment",
-      (this.props.source.outsideBiText.en && this.props.source.outsideBiText.en.stripHtml() === "...") || (!this.props.source.outsideBiText.en.stripHtml()) ? "heOnly" : null,
-      (this.props.source.outsideBiText.he && this.props.source.outsideBiText.he.stripHtml() === "...") || (!this.props.source.outsideBiText.he.stripHtml()) ? "enOnly" : null,
-      this.props.highlightedNode == this.props.source.node ? "highlight" : null,
-    );
-
-    const sectionClasses= classNames("SheetOutsideBiText",
-      this.props.source.options ? this.props.source.options.indented : null,
-    );
-
-    return (
-      <section className={sectionClasses}>
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-
-          <div className="he">
-            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
-            <div className="sourceContentText outsideBiText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideBiText.he)} }></div>
-          </div>
-          <div className="en">
-            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
-            <div className="sourceContentText outsideBiText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideBiText.en)} }></div>
-          </div>
-
-          <div className="clearFix"></div>
-
-          {this.props.source.addedBy ?
-          <div className="addedBy">
-            <small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small>
-          </div>
-          : null }
 
+        <div id="printFooter" style={{display:"none"}}>
+          <span className="int-en">Created with <img src="/static/img/logo.svg" /></span>
+          <span className="int-he">{Sefaria._("Created with")} <img src="/static/img/logo.svg" /></span>
         </div>
-      </section>
-    );
+      </div>
+    )
   }
 }
 
-
-class SheetMedia extends Component {
-  makeMediaEmbedContent() {
-    var mediaLink;
-    var mediaCaption = "";
-    var mediaClass = "media fullWidth";
-    var mediaURL = this.props.source.media;
-    var caption  = this.props.source.caption;
-
-    if (this.isImage()) {
-      mediaLink = '<img class="addedMedia" src="' + mediaURL + '" />';
-    }
-    else if (mediaURL.match(/https?:\/\/www\.youtube\.com\/embed\/.+?rel=0(&amp;|&)showinfo=0$/i) != null) {
-      mediaLink = '<div class="youTubeContainer"><iframe width="100%" height="100%" src=' + mediaURL + ' frameborder="0" allowfullscreen></iframe></div>';
-    }
-
-    else if (mediaURL.toLowerCase().match(/https?:\/\/player\.vimeo\.com\/.*/i) != null) {
-      mediaLink = '<div class="youTubeContainer"><iframe width="100%" height="100%" src=' + mediaURL + ' frameborder="0"  allow="autoplay; fullscreen" allowfullscreen></iframe></div>';
-    }
-
-    else if (mediaURL.match(/https?:\/\/w\.soundcloud\.com\/player\/\?url=.*/i) != null) {
-      mediaLink = '<iframe width="100%" height="166" scrolling="no" frameborder="no" src="' + mediaURL + '"></iframe>';
-    }
-
-    else if (mediaURL.match(/\.(mp3)$/i) != null) {
-      mediaLink = '<audio src="' + mediaURL + '" type="audio/mpeg" controls>Your browser does not support the audio element.</audio>';
-    }
-
-    else {
-      mediaLink = 'Error loading media...';
-    }
-
-    if (caption && (caption.en || caption.he) ) {
-      var cls = caption.en && caption.he ? "" : caption.en ? "enOnly" : "heOnly";
-      mediaCaption = "<div class='mediaCaption " + cls + "'><div class='mediaCaptionInner'>" +
-                "<div class='en'>" + (caption.en || "") + "</div>" +
-                "<div class='he'>" + (caption.he || "") + "</div>" +
-                 "</div></div>";
+const AddToSheetButton = ({highlightedNode, sheetID, highlightedRefs, toggleSignUpModal}) => {
+  const handleClick = () => {
+    if (Sefaria._uid) {
+      setShowingModal(true);
+    } else {
+      toggleSignUpModal(SignUpModalKind.AddToSheet);
     }
-
-    return "<div class='" + mediaClass + "'>" + mediaLink + mediaCaption + "</div>";
-  }
-  isImage() {
-    return (this.props.source.media.match(/\.(jpeg|jpg|gif|png)$/i) != null);
-  }
-  render() {
-    if (this.props.hideImages && this.isImage()) { return null; }
-    const containerClasses = classNames(
-      "sheetItem",
-      "segment",
-      this.props.highlightedNode === this.props.source.node ? "highlight" : null,
-      this.props.source.options ? this.props.source.options.indented : null
-    );
-    return (
-      <section className="SheetMedia">
-        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to  " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
-
-          <div className="sourceContentText centeredSheetContent" dangerouslySetInnerHTML={ {__html: this.makeMediaEmbedContent()} }></div>
-          <div className="clearFix"></div>
-          {this.props.source.addedBy ?
-            <div className="addedBy"><small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small></div>
-            : null }
-        </div>
-      </section>
-    );
   }
+  const [showingModal, setShowingModal] = useState(false);
+  const nodeRef = `${sheetID}.${highlightedNode}`;
+  return <>
+    <div onClick={handleClick} className="addToSheetButton">
+      <span className="addToSheetPlus">+</span>
+      <span className="addToSheetText">Add to Sheet</span>
+    </div>
+    {showingModal &&
+        <AddToSourceSheetModal nodeRef={nodeRef} srefs={highlightedRefs} close={() => setShowingModal(false)}/>}
+  </>;
 }
 
 class SheetNotice extends Component {
diff --git a/static/js/sheets/SheetContentSegments.jsx b/static/js/sheets/SheetContentSegments.jsx
new file mode 100644
index 0000000000..666ef9b424
--- /dev/null
+++ b/static/js/sheets/SheetContentSegments.jsx
@@ -0,0 +1,298 @@
+import Component from "react-class";
+import classNames from "classnames";
+import Sefaria from "../sefaria/sefaria";
+import React from "react";
+
+class SheetSource extends Component {
+  render() {
+
+    const sectionClasses= classNames(
+      "SheetSource",
+      this.props.source.options ? this.props.source.options.indented : null,
+    );
+
+    const containerClasses = classNames(
+      "sheetItem",
+      "segment",
+      this.props.highlighted && "highlight",
+      (this.props.source.text && this.props.source.text.en && this.props.source.text.en.stripHtml() === "...") || (this.props.source.text && (!this.props.source.text.en || !this.props.source.text.en.stripHtml())) ? "heOnly" : null,
+      (this.props.source.text && this.props.source.text.he && this.props.source.text.he.stripHtml() === "...") || (this.props.source.text && (!this.props.source.text.he || !this.props.source.text.he.stripHtml())) ? "enOnly" : null,
+      this.props.source.options && this.props.source.options.refDisplayPosition ? "ref-display-"+ this.props.source.options.refDisplayPosition : null
+    );
+
+    return (
+      <section className={sectionClasses} style={{"borderColor": Sefaria.palette.refColor(this.props.source.ref)}}>
+        <div className={containerClasses}
+          onClick={this.props.sheetSourceClick}
+          data-node={this.props.source.node}
+          aria-label={"Click to see connections to this source"}
+          tabIndex="0"
+          onKeyPress={function(e) {
+            e.charCode === 13 ? this.props.sheetSourceClick(e):null}.bind(this)
+          } >
+          {this.props.source.title ?
+          <div className="customSourceTitle" role="heading" aria-level="3">
+            <div className="titleBox">{this.props.source.title.stripHtml()}</div>
+          </div> : null}
+
+          {this.props.source.text && this.props.source.text.he && this.props.source.text.he !== "" ?
+          <div className="he">
+            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
+            <div className="ref">
+              {this.props.source.options && this.props.source.options.PrependRefWithHe ? this.props.source.options.PrependRefWithHe : null}
+              <a href={"/" + Sefaria.normRef(this.props.source.ref)}>{this.props.source.heRef}</a>
+            </div>
+            <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: (Sefaria.util.cleanHTML(this.props.source.text.he))} }></div>
+          </div> : null }
+
+          {this.props.source.text && this.props.source.text.en && this.props.source.text.en !== "" ?
+          <div className="en">
+            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
+            <div className="ref">
+              {this.props.source.options && this.props.source.options.PrependRefWithEn ? this.props.source.options.PrependRefWithEn : null}
+              <a href={"/" + Sefaria.normRef(this.props.source.ref)}>{this.props.source.ref}</a>
+            </div>
+            <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: (Sefaria.util.cleanHTML(this.props.source.text.en))} }></div>
+          </div> : null }
+
+          <div className="clearFix"></div>
+
+          {this.props.source.addedBy ?
+          <div className="addedBy">
+            <small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small>
+          </div>
+          : null }
+
+        </div>
+        {this.props.addToSheetButton}
+      </section>
+    );
+  }
+}
+
+
+class SheetComment extends Component {
+  render() {
+    const lang = Sefaria.hebrew.isHebrew(this.props.source.comment.stripHtml().replace(/\s+/g, ' ')) ? "he" : "en";
+    const containerClasses = classNames(
+      "sheetItem",
+      "segment",
+      lang == "he" ? "heOnly" : "enOnly",
+      this.props.source.node === this.props.highlightedNode && "highlight",
+      this.props.source.options ? this.props.source.options.indented : null
+    );
+
+    return (
+      <section className="SheetComment">
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+
+          <div className={lang}>
+              <div
+                className="sourceContentText"
+                dangerouslySetInnerHTML={{__html: Sefaria.util.cleanHTML(this.props.source.comment)}}></div>
+          </div>
+
+          <div className="clearFix"></div>
+          {this.props.source.addedBy ?
+          <div className="addedBy">
+            <small><em>
+              {Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span>
+            </em></small>
+          </div>
+          : null }
+
+        </div>
+        {this.props.addToSheetButton}
+      </section>
+    );
+  }
+}
+
+class SheetHeader extends Component {
+  render() {
+    const lang = Sefaria.hebrew.isHebrew(this.props.source.outsideText.stripHtml().replace(/\s+/g, ' ')) ? "he" : "en";
+    const containerClasses = classNames("sheetItem",
+        "segment",
+        lang == "he" ? "heOnly" : "enOnly",
+        this.props.source.node === this.props.highlightedNode && "highlight",
+        this.props.source.options ? this.props.source.options.indented : null
+    );
+
+    return (
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+          <div className={lang}>
+              <div className="sourceContentText"><h1><span>{this.props.source.outsideText.stripHtml()}</span></h1></div>
+          </div>
+          {this.props.addToSheetButton}
+        </div>
+    )
+
+
+  }
+
+}
+
+
+class SheetOutsideText extends Component {
+  shouldPassClick(e) {
+    const target = e.target.closest('a')
+    if (target) {
+      return
+    }
+    else{
+      this.props.sheetSourceClick(this.props.source)
+    }
+  }
+
+  render() {
+    const lang = Sefaria.hebrew.isHebrew(this.props.source.outsideText.stripHtml().replace(/\s+/g, ' ')) ? "he" : "en";
+    const containerClasses = classNames("sheetItem",
+        "segment",
+        lang == "he" ? "heOnly" : "enOnly",
+        this.props.source.node === this.props.highlightedNode && "highlight",
+        this.props.source.options ? this.props.source.options.indented : null
+    );
+
+    return (
+      <section className="SheetOutsideText">
+        <div className={containerClasses} data-node={this.props.source.node} onClick={(e) => this.shouldPassClick(e)} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+
+          <div className={lang}>{this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
+              <div className="sourceContentText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideText)} }></div>
+          </div>
+
+          <div className="clearFix"></div>
+
+          {this.props.source.addedBy ?
+          <div className="addedBy">
+            <small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small>
+          </div>
+          : null }
+
+        </div>
+        {this.props.addToSheetButton}
+      </section>
+    );
+  }
+}
+
+
+class SheetOutsideBiText extends Component {
+  render() {
+    const containerClasses = classNames(
+      "sheetItem",
+      "segment",
+      (this.props.source.outsideBiText.en && this.props.source.outsideBiText.en.stripHtml() === "...") || (!this.props.source.outsideBiText.en.stripHtml()) ? "heOnly" : null,
+      (this.props.source.outsideBiText.he && this.props.source.outsideBiText.he.stripHtml() === "...") || (!this.props.source.outsideBiText.he.stripHtml()) ? "enOnly" : null,
+      this.props.source.node === this.props.highlightedNode && "highlight",
+    );
+
+    const sectionClasses= classNames("SheetOutsideBiText",
+      this.props.source.options ? this.props.source.options.indented : null,
+    );
+
+    return (
+      <section className={sectionClasses}>
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to see " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+
+          <div className="he">
+            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
+            <div className="sourceContentText outsideBiText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideBiText.he)} }></div>
+          </div>
+          <div className="en">
+            {this.props.source.options && this.props.source.options.sourcePrefix && this.props.source.options.sourcePrefix != "" ? <sup className="sourcePrefix">{this.props.source.options.sourcePrefix}</sup> : null }
+            <div className="sourceContentText outsideBiText" dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.outsideBiText.en)} }></div>
+          </div>
+
+          <div className="clearFix"></div>
+
+          {this.props.source.addedBy ?
+          <div className="addedBy">
+            <small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small>
+          </div>
+          : null }
+
+        </div>
+        {this.props.addToSheetButton}
+      </section>
+    );
+  }
+}
+
+
+class SheetMedia extends Component {
+  makeMediaEmbedContent() {
+    var mediaLink;
+    var mediaCaption = "";
+    var mediaClass = "media fullWidth";
+    var mediaURL = this.props.source.media;
+    var caption  = this.props.source.caption;
+
+    if (this.isImage()) {
+      mediaLink = '<img class="addedMedia" src="' + mediaURL + '" />';
+    }
+    else if (mediaURL.match(/https?:\/\/www\.youtube\.com\/embed\/.+?rel=0(&amp;|&)showinfo=0$/i) != null) {
+      mediaLink = '<div class="youTubeContainer"><iframe width="100%" height="100%" src=' + mediaURL + ' frameborder="0" allowfullscreen></iframe></div>';
+    }
+
+    else if (mediaURL.toLowerCase().match(/https?:\/\/player\.vimeo\.com\/.*/i) != null) {
+      mediaLink = '<div class="youTubeContainer"><iframe width="100%" height="100%" src=' + mediaURL + ' frameborder="0"  allow="autoplay; fullscreen" allowfullscreen></iframe></div>';
+    }
+
+    else if (mediaURL.match(/https?:\/\/w\.soundcloud\.com\/player\/\?url=.*/i) != null) {
+      mediaLink = '<iframe width="100%" height="166" scrolling="no" frameborder="no" src="' + mediaURL + '"></iframe>';
+    }
+
+    else if (mediaURL.match(/\.(mp3)$/i) != null) {
+      mediaLink = '<audio src="' + mediaURL + '" type="audio/mpeg" controls>Your browser does not support the audio element.</audio>';
+    }
+
+    else {
+      mediaLink = 'Error loading media...';
+    }
+
+    if (caption && (caption.en || caption.he) ) {
+      var cls = caption.en && caption.he ? "" : caption.en ? "enOnly" : "heOnly";
+      mediaCaption = "<div class='mediaCaption " + cls + "'><div class='mediaCaptionInner'>" +
+                "<div class='en'>" + (caption.en || "") + "</div>" +
+                "<div class='he'>" + (caption.he || "") + "</div>" +
+                 "</div></div>";
+    }
+
+    return "<div class='" + mediaClass + "'>" + mediaLink + mediaCaption + "</div>";
+  }
+  isImage() {
+    return (this.props.source.media.match(/\.(jpeg|jpg|gif|png)$/i) != null);
+  }
+  render() {
+    if (this.props.hideImages && this.isImage()) { return null; }
+    const containerClasses = classNames(
+      "sheetItem",
+      "segment",
+      this.props.source.node === this.props.highlightedNode && "highlight",
+      this.props.source.options ? this.props.source.options.indented : null
+    );
+    return (
+      <section className="SheetMedia">
+        <div className={containerClasses} data-node={this.props.source.node} onClick={this.props.sheetSourceClick} aria-label={"Click to  " + this.props.linkCount +  " connections to this source"} tabIndex="0" onKeyPress={function(e) {e.charCode == 13 ? this.props.sheetSourceClick(e):null}.bind(this)} >
+
+          <div className="sourceContentText centeredSheetContent" dangerouslySetInnerHTML={ {__html: this.makeMediaEmbedContent()} }></div>
+          <div className="clearFix"></div>
+          {this.props.source.addedBy ?
+            <div className="addedBy"><small><em>{Sefaria._("Added by")}: <span dangerouslySetInnerHTML={ {__html: Sefaria.util.cleanHTML(this.props.source.userLink)} }></span></em></small></div>
+            : null }
+        </div>
+        {this.isImage() && this.props.addToSheetButton}
+      </section>
+    );
+  }
+}
+
+export {
+   SheetMedia,
+   SheetSource,
+   SheetComment,
+   SheetOutsideText,
+   SheetHeader,
+   SheetOutsideBiText
+}
\ No newline at end of file
diff --git a/static/js/sheets/SheetOptions.jsx b/static/js/sheets/SheetOptions.jsx
index 44c1f89531..b7f6ce2070 100644
--- a/static/js/sheets/SheetOptions.jsx
+++ b/static/js/sheets/SheetOptions.jsx
@@ -6,6 +6,7 @@ import {ShareBox} from "../ConnectionsPanel";
 import Sefaria from "../sefaria/sefaria";
 import $ from "../sefaria/sefariaJquery";
 import {SignUpModalKind} from "../sefaria/signupModalContent";
+import {AddToSourceSheetBox} from "../AddToSourceSheet";
 import {CollectionsWidget} from "../CollectionsWidget";
 const modifyHistoryObjectForSheetOptions = (historyObject) => {
   // we want the 'ref' property to be for the sheet itself and not its segments, as in "Sheet 3" not "Sheet 3:4"
@@ -121,6 +122,9 @@ const CollectionsModal = ({close, sheetID}) => {
         </Modal>;
 }
 
+const AddToSourceSheetModal = ({nodeRef, srefs, close}) => {
+  return <Modal isOpen={true} close={close}><AddToSourceSheetBox nodeRef={nodeRef} srefs={srefs} hideGDocAdvert={true}/></Modal>
+}
 const CopyButton = ({onClick}) => {
   return <DropdownMenuItemWithIcon
               textEn={"Copy"}
@@ -282,4 +286,5 @@ const GoogleDocExportModal = ({ sheetID, close }) => {
 
 }
 
-export {SheetOptions};
\ No newline at end of file
+
+export {SheetOptions, AddToSourceSheetModal};
\ No newline at end of file