diff --git a/src/common/ShareModal/ShareModal.js b/src/common/ShareModal/ShareModal.js
index f2168582a..22ffad397 100644
--- a/src/common/ShareModal/ShareModal.js
+++ b/src/common/ShareModal/ShareModal.js
@@ -1,10 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Input } from 'stremio-common';
 import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
 import colors from 'stremio-colors';
 import styles from './styles';
 
-const renderUrl = (copyToClipboard, url) => {
+const renderInput = ({ className, href, icon, label }, url) => {
+    return (
+        <Input className={styles[className]} type={'link'} href={href + url} target={'_blank'}>
+            <Icon className={styles['icon']} icon={icon} />{label}
+        </Input>
+    );
+}
+
+const renderUrl = (url) => {
     if (url.length === 0) {
         return null;
     }
@@ -19,6 +28,11 @@ const renderUrl = (copyToClipboard, url) => {
     );
 }
 
+const copyToClipboard = (event) => {
+    event.currentTarget.parentNode.children[0].select();
+    document.execCommand('copy');
+}
+
 const ShareModal = (props) => {
     const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
     const imageStyle = {
@@ -28,22 +42,16 @@ const ShareModal = (props) => {
     return (
         <div className={styles['share-modal']}>
             <div className={styles['x-container']}>
-                <div onClick={props.closeModalDialog} style={imageStyle} className={styles['x-icon']} />
+                <div onClick={props.onClose} style={imageStyle} className={styles['x-icon']} />
             </div>
             <div className={styles['info-container']}>
-                <div className={styles['share-label']}>Share Add-on</div>
+                <div className={styles['share-label']}>Share</div>
                 <div className={styles['buttons']}>
-                    <div onClick={props.shareInFacebook} className={styles['facebook-button']}>
-                        <Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
-                    </div>
-                    <div onClick={props.shareInTwitter} className={styles['twitter-button']}>
-                        <Icon className={styles['twitter-icon']} icon={'ic_twitter'} />TWITTER
-                    </div>
-                    <div onClick={props.shareInGplus} className={styles['gplus-button']}>
-                        <Icon className={styles['gplus-icon']} icon={'ic_gplus'} />GOOGLE+
-                    </div>
+                    {renderInput({ className: 'facebook-button', href: 'https://www.facebook.com/sharer/sharer.php?u=', icon: 'ic_facebook', label: 'FACEBOOK' })}
+                    {renderInput({ className: 'twitter-button', href: 'https://twitter.com/home?status=', icon: 'ic_twitter', label: 'TWITTER' })}
+                    {renderInput({ className: 'gplus-button', href: 'https://plus.google.com/share?url=', icon: 'ic_gplus', label: 'GOOGLE+' })}
                 </div>
-                {renderUrl(props.copyToClipboard, props.url)}
+                {renderUrl(props.url)}
             </div>
         </div>
     );
@@ -51,14 +59,10 @@ const ShareModal = (props) => {
 
 ShareModal.propTypes = {
     url: PropTypes.string.isRequired,
-    closeModalDialog: PropTypes.func,
-    shareInFacebook: PropTypes.func,
-    shareInTwitter: PropTypes.func,
-    shareInGplus: PropTypes.func,
-    copyToClipboard: PropTypes.func
+    onClose: PropTypes.func
 };
 ShareModal.defaultProps = {
     url: ''
 };
 
-export default ShareModal;
\ No newline at end of file
+export default ShareModal;
diff --git a/src/common/ShareModal/styles.less b/src/common/ShareModal/styles.less
index 9ccb11431..bf36ab355 100644
--- a/src/common/ShareModal/styles.less
+++ b/src/common/ShareModal/styles.less
@@ -1,60 +1,12 @@
-@share-modal-width: 380px;
-@spacing: floor((@share-modal-width * 0.06));
-
 .share-modal {
-    width: @share-modal-width;
-    padding: ceil((@spacing * 0.5));
-
-    .x-icon {
-        width: ceil((@spacing * 0.5));
-        height: ceil((@spacing * 0.5));
-    }
-
-    .info-container {
-        padding: floor((@spacing * 0.3)) ceil((@spacing * 0.9)) @spacing ceil((@spacing * 0.9));
-
-        .buttons {
-            padding: @spacing 0;
-        }
-
-        .facebook-button, .twitter-button, .gplus-button {
-            width: ceil((@share-modal-width * 0.26));
-            height: floor((@share-modal-width * 0.09));
-
-            .facebook-icon, .twitter-icon, .gplus-icon {
-                width: ceil((@spacing * 0.6));
-                height: ceil((@spacing * 0.6));
-                margin-right: floor((@spacing * 0.3));
-            }
-        }
-
-        .url-container {
-            border-radius: 4px;
-            border-width: 1px;
-
-            .url {
-                font-size: 12px;
-                border-radius: 4px;
-                padding: ceil((@spacing * 0.5));
-            }
-
-            .copy-label {
-                font-size: 14px;
-                border-top-right-radius: 3px;
-                border-bottom-right-radius: 3px;
-                padding: ceil((@spacing * 0.5));
-
-                .copy-icon {
-                    width: ceil((@spacing * 0.7));
-                    height: ceil((@spacing * 0.7));
-                    margin-right: floor((@spacing * 0.3));
-                }
-            }
-        }
-    }
+    --share-modal-width: 380px;
+    --spacing: 22px;
+    font-size: 14px;
 }
 
 .share-modal {
+    padding: calc(var(--spacing) * 0.5);
+    width: var(--share-modal-width);
     color: var(--color-surfacelighter);
     background-color: var(--color-surfacelighter);
 
@@ -63,73 +15,91 @@
         justify-content: flex-end;
 
         .x-icon {
-            cursor: pointer;
+            width: calc(var(--spacing) * 0.5);
+            height: calc(var(--spacing) * 0.5);
             background-position: center;
             background-repeat: no-repeat;
+            cursor: pointer;
         }
     }
 
-    .share-label {
-        color: var(--color-backgrounddarker);
-        font-weight: 500;
-    }
+    .info-container {
+        padding: calc(var(--spacing) * 0.2) calc(var(--spacing) * 0.9) calc(var(--spacing) * 1.2) calc(var(--spacing) * 0.9);
 
-    .buttons {
-        display: flex;
-        font-size: 11px;
-        justify-content: space-between;
+        .share-label {
+            font-size: 1.1em;
+            color: var(--color-backgrounddarker);
+        }
 
-        .facebook-button, .twitter-button, .gplus-button {
+        .buttons {
+            padding: var(--spacing) 0;
             display: flex;
-            cursor: pointer;
-            align-items: center;
-            justify-content: center;
+            justify-content: space-between;
+    
+            .facebook-button, .twitter-button, .gplus-button {
+                width: calc(var(--share-modal-width) * 0.26);
+                height: calc(var(--share-modal-width) * 0.09);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 0.8em;
+                color: var(--color-surfacelighter);
+                cursor: pointer;
 
-            .facebook-icon, .twitter-icon, .gplus-icon {
-                fill: var(--color-surfacelighter);
+                .icon {
+                    margin-right: calc(var(--spacing) * 0.3);
+                    width: calc(var(--spacing) * 0.7);
+                    height: calc(var(--spacing) * 0.7);
+                    fill: var(--color-surfacelighter);
+                }
+            }
+
+            .facebook-button {
+                background-color: var(--color-secondary);
+            }
+
+            .twitter-button {
+                background-color: var(--color-secondarylighter);
+            }
+
+            .gplus-button {
+                background-color: var(--color-signal2);
             }
         }
 
-        .facebook-button {
-            background-color: var(--color-secondary);
-        }
-
-        .twitter-button {
-            background-color: var(--color-secondarylighter);
-        }
-
-        .gplus-button {
-            background-color: var(--color-signal2);
-        }
-    }
-
-    .url-container {
-        display: flex;
-        border-style: solid;
-        border-color: var(--color-surface);
-
-        .url, .copy-label {
-            color: var(--color-backgrounddarker40);
-        }
-
-        .url {
-            width: 75%;
-            outline: none;
-            font-weight: 600;
-            text-align: center;
-            text-overflow: ellipsis;
-        }
-
-        .copy-label {
-            cursor: pointer;
-            width: 25%;
-            font-weight: 500;
+        .url-container {
             display: flex;
-            justify-content: center;
-            background-color: var(--color-backgrounddarker20);
+            border-radius: 4px;
+            border: 1px solid var(--color-surface);
 
-            .copy-icon {
-                fill: var(--color-backgrounddarker40);
+            .url {
+                padding: calc(var(--spacing) * 0.5);
+                width: 75%;
+                font-size: 0.9em;
+                text-align: center;
+                text-overflow: ellipsis;
+                border-radius: 4px;
+                color: var(--color-surfacedark);
+                outline: none;
+            }
+
+            .copy-label {
+                padding: calc(var(--spacing) * 0.5);
+                width: 25%;
+                display: flex;
+                justify-content: center;
+                border-top-right-radius: 3px;
+                border-bottom-right-radius: 3px;
+                color: var(--color-surfacedark);
+                background-color: var(--color-surfacelight);
+                cursor: pointer;
+
+                .copy-icon {
+                    margin-right: calc(var(--spacing) * 0.3);
+                    width: calc(var(--spacing) * 0.7);
+                    height: calc(var(--spacing) * 0.7);
+                    fill: var(--color-backgrounddarker40);
+                }
             }
         }
     }