diff --git a/src/Room.jsx b/src/Room.jsx
index fa5b0813..4b26717a 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -22,6 +22,7 @@ import {
   MicButton,
   VideoButton,
   LayoutToggleButton,
+  ScreenshareButton,
 } from "./RoomButton";
 import { Header, LeftNav, RightNav, CenterNav } from "./Header";
 import { Button, ErrorMessage } from "./Input";
@@ -301,7 +302,10 @@ function InRoomView({
           enabled={localVideoMuted}
           onClick={toggleLocalVideoMuted}
         />
-        <VideoButton enabled={isScreensharing} onClick={toggleScreensharing} />
+        <ScreenshareButton
+          enabled={isScreensharing}
+          onClick={toggleScreensharing}
+        />
         <HangupButton onClick={onLeave} />
       </div>
     </>
diff --git a/src/RoomButton.jsx b/src/RoomButton.jsx
index b38d13a0..3f49d413 100644
--- a/src/RoomButton.jsx
+++ b/src/RoomButton.jsx
@@ -9,6 +9,7 @@ import { ReactComponent as HangupIcon } from "./icons/Hangup.svg";
 import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
 import { ReactComponent as GridIcon } from "./icons/Grid.svg";
 import { ReactComponent as SpeakerIcon } from "./icons/Speaker.svg";
+import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
 
 export function RoomButton({ on, className, children, ...rest }) {
   return (
@@ -37,6 +38,18 @@ export function VideoButton({ enabled, ...rest }) {
   );
 }
 
+export function ScreenshareButton({ enabled, className, ...rest }) {
+  return (
+    <RoomButton
+      className={classNames(styles.screenshareButton, className)}
+      {...rest}
+      on={enabled}
+    >
+      <ScreenshareIcon />
+    </RoomButton>
+  );
+}
+
 export function HangupButton({ className, ...rest }) {
   return (
     <RoomButton
diff --git a/src/RoomButton.module.css b/src/RoomButton.module.css
index bb44ad56..c0f62d1d 100644
--- a/src/RoomButton.module.css
+++ b/src/RoomButton.module.css
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.roomButton, .headerButton {
+.roomButton,
+.headerButton {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -32,11 +33,10 @@ limitations under the License.
 }
 
 .roomButton:hover {
-  background-color: #8D97A5;
+  background-color: #8d97a5;
 }
 
 .roomButton:active {
-  
 }
 
 .roomButton.on {
@@ -50,11 +50,11 @@ limitations under the License.
 }
 
 .headerButton svg * {
-  fill: #8E99A4;
+  fill: #8e99a4;
 }
 
 .headerButton:hover {
-  background-color: #8D97A5;
+  background-color: #8d97a5;
 }
 
 .headerButton:hover svg * {
@@ -62,9 +62,14 @@ limitations under the License.
 }
 
 .headerButton.on svg * {
-  fill: #0DBD8B
+  fill: #0dbd8b;
 }
 
-.hangupButton, .hangupButton:hover {
-  background-color: #FF5B55;
+.hangupButton,
+.hangupButton:hover {
+  background-color: #ff5b55;
+}
+
+.screenshareButton.on svg * {
+  fill: #0dbd8b;
 }
diff --git a/src/icons/Screenshare.svg b/src/icons/Screenshare.svg
new file mode 100644
index 00000000..71f5daff
--- /dev/null
+++ b/src/icons/Screenshare.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 0.5C2.09315 0.5 0.75 1.84314 0.75 3.5V13.5713C0.75 15.2282 2.09315 16.5713 3.75 16.5713H20.2499C21.9067 16.5713 23.2499 15.2282 23.2499 13.5713V3.5C23.2499 1.84315 21.9067 0.5 20.2499 0.5H3.75ZM12.7998 11.9106C12.7998 12.3524 12.4416 12.7106 11.9998 12.7106C11.558 12.7106 11.1998 12.3524 11.1998 11.9106L11.1998 7.09206L9.43158 8.86029C9.11916 9.17271 8.61263 9.17271 8.30021 8.86029C7.98779 8.54787 7.98779 8.04134 8.30021 7.72892L11.4341 4.59501C11.7465 4.28259 12.2531 4.28259 12.5655 4.59501L15.6994 7.72892C16.0118 8.04134 16.0118 8.54787 15.6994 8.86029C15.387 9.17271 14.8805 9.17271 14.568 8.86029L12.7998 7.09206L12.7998 11.9106Z" fill="white"/>
+</svg>