diff --git a/_data/theme.yml b/_data/theme.yml
index f9ab82f..6f1ac25 100644
--- a/_data/theme.yml
+++ b/_data/theme.yml
@@ -87,6 +87,7 @@ search-child-objects: true # true / false - if true, child objects will appear o
 # 
 transcript-fields: "description,date,location,interviewer,image" # choose from the following fields --> description,date,location,interviewer,interviewee,bio,image 
 # list the fields you'd like displayed, separated by comma
+media-scroll: true ## true/false --> determines if the media and vizualization will appear to the lower right as a user scrolls down a transcript. This only appears on larger screens (min width 1024px).
 
 
 
diff --git a/_includes/transcript/js/transcript-js.html b/_includes/transcript/js/transcript-js.html
index edfd1fc..6b3cb09 100644
--- a/_includes/transcript/js/transcript-js.html
+++ b/_includes/transcript/js/transcript-js.html
@@ -267,12 +267,14 @@
         // Update the class of the filter tab element based on stickiness
         if (isSticky) {
             filterTabElement.classList.remove('d-none');
+            {% if site.data.theme.media-scroll == true %}document.getElementById("upper-content").classList.add("media-scroll-wrapper");{% endif %}
         } else {
             filterTabElement.classList.add('d-none');
             if (filtersSearch.classList.contains("retracted")) {
           filtersSearch.classList.remove("retracted");
           console.log("removing retracted");
           };
+          {% if site.data.theme.media-scroll == true %}document.getElementById("upper-content").classList.remove("media-scroll-wrapper");{% endif %}
         }
     }
     
diff --git a/_includes/transcript/style/iframe-wrapper.html b/_includes/transcript/style/iframe-wrapper.html
deleted file mode 100644
index b6e6a4a..0000000
--- a/_includes/transcript/style/iframe-wrapper.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<style>
-    .iframe-wrapper {
-    position: fixed;
-    right: 10px;
-    bottom: 320px;
-    height: 200px;
-    width: 370px
-}
-
-.iframe-wrapper .meta {
-    display: none
-}
-
-@media screen and (max-width: 576px) {
-    .iframe-wrapper {
-        bottom:0px;
-        left: 0px;
-        height: auto;
-        width: 300px
-    }
-
-    .iframe-wrapper .meta {
-        display: none
-    }
-
-    .iframe-wrapper .vizdiv,.iframe-wrapper #colorViz,.iframe-wrapper .title {
-        display: none
-    }
-}
-
-@media (max-width: 1024px) {
-    .iframe-wrapper {
-        display:none
-    }
-}
-</style>
\ No newline at end of file
diff --git a/_includes/transcript/style/media-scroll-wrapper.html b/_includes/transcript/style/media-scroll-wrapper.html
new file mode 100644
index 0000000..0db5d56
--- /dev/null
+++ b/_includes/transcript/style/media-scroll-wrapper.html
@@ -0,0 +1,29 @@
+<p class="h3" id="side-title">{{page.interviewee | default: page.title }}</p>
+<style>
+#side-title{
+    display: none;
+}
+
+.media-scroll-wrapper {
+    position: fixed;
+    right: 10px;
+    bottom: 300px;
+    height: 200px;
+    width: 370px
+}
+
+.media-scroll-wrapper .meta {
+    display: none
+}
+
+.media-scroll-wrapper #side-title {
+    display: flex;
+}
+
+@media screen and (max-width: 998px) {
+
+    .media-scroll-wrapper {
+        display: none
+    }
+}
+</style>
\ No newline at end of file
diff --git a/_includes/transcript/style/visualization-filter-legend.html b/_includes/transcript/style/visualization-filter-legend.html
index 38be470..670796d 100644
--- a/_includes/transcript/style/visualization-filter-legend.html
+++ b/_includes/transcript/style/visualization-filter-legend.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row meta">
         {% for n in site.data.filters %}
         {% if uniqueSubjects contains n.tag %}
         <div class="col-md-2 col-4 ">