diff --git a/src/App/styles.less b/src/App/styles.less
index eb80225cd..2b5908e9b 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -36,7 +36,7 @@
     overflow: hidden;
     word-break: break-word;
     scrollbar-width: thin;
-    scrollbar-color: @color-secondary-light4-80 @color-background-dark3;
+    scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2;
 }
 
 ::-webkit-scrollbar {
@@ -44,11 +44,15 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: @color-secondary-light4-80;
+    background-color: @color-secondaryvariant2-light1;
+
+    &:hover {
+        background-color: @color-secondaryvariant2-light2;
+    }
 }
 
 ::-webkit-scrollbar-track {
-    background-color: @color-background-dark3;
+    background-color: @color-background-dark2;
 }
 
 svg {
diff --git a/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js b/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
index d2c43e9c5..4e0de5e73 100644
--- a/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
+++ b/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
@@ -20,21 +20,20 @@ const AddonDetails = ({ className, id, name, version, logo, description, types,
                     alt={' '}
                     renderFallback={renderLogoFallback}
                 />
-                <span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
+                <div className={styles['name-container']}>
+                    <span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
+                    {
+                        typeof version === 'string' && version.length > 0 ?
+                            <span className={styles['version']}>v. {version}</span>
+                            :
+                            null
+                    }
+                </div>
             </div>
             {
                 typeof description === 'string' && description.length > 0 ?
                     <div className={styles['section-container']}>
-                        <span className={styles['section-header']}>{description}</span>
-                    </div>
-                    :
-                    null
-            }
-            {
-                typeof version === 'string' && version.length > 0 ?
-                    <div className={styles['section-container']}>
-                        <span className={styles['section-header']}>Version: </span>
-                        <span className={styles['section-label']}>{version}</span>
+                        <span className={styles['section-label']}>{description}</span>
                     </div>
                     :
                     null
diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 2d69af547..38fa4b560 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -1,12 +1,18 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .addon-details-container {
     .title-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
         .logo, .icon {
             float: left;
             width: 5rem;
             height: 5rem;
-            margin-right: 1rem;
+            margin-right: 1.5rem;
             padding: 0.5rem;
-            background-color: var(--color-backgrounddarker);
+            background-color: @color-background-dark5;
         }
 
         .logo {
@@ -15,13 +21,34 @@
         }
 
         .icon {
-            fill: var(--color-surfacelighter);
+            fill: @color-secondaryvariant1-light3;
         }
 
-        .name {
-            font-size: 2.4rem;
-            font-weight: 300;
-            line-height: 5rem;
+        .name-container {
+            flex-grow: 1;
+            flex-shrink: 1;
+            flex-basis: 0;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: baseline;
+    
+            .name {
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-right: 0.5rem;
+                font-size: 1.6rem;
+                color: @color-background-dark5-90;
+            }
+    
+            .version {
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-top: 0.5rem;
+                color: @color-background-dark5-60;
+            }
         }
     }
 
@@ -29,12 +56,14 @@
         margin-top: 1rem;
 
         .section-header {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
+            color: @color-background-dark5-90;
         }
 
         .section-label {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             font-weight: 300;
+            color: @color-background-dark5-90;
 
             &.transport-url-label {
                 user-select: text;
diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
index 146dc9a2f..59b0a11ac 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/common/AddonDetailsModal/styles.less
@@ -1,10 +1,12 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/ModalDialog/styles.less') {
     label: label;
 }
 
 .addon-details-modal-container {
     .addon-details-container, .addon-details-message-container {
-        width: 60rem;
+        width: 40rem;
         max-width: 100%;
     }
 
@@ -15,20 +17,29 @@
         }
     }
 
-    .cancel-button, .uninstall-button {
-        background-color: transparent;
-        outline-width: var(--focus-outline-size);
-        outline-offset: calc(-1 * var(--focus-outline-size));
-        outline-color: var(--color-surfacedarker);
-        outline-style: solid;
+    .uninstall-button, .cancel-button {
+        &:focus {
+            outline-color: @color-background-dark5;
+        }
+    }
 
-        &:hover, &:focus {
-            filter: none;
-            background: var(--color-surfacelight);
+    .cancel-button {
+        background-color: transparent;
+
+        &:hover {
+            background-color: @color-surface-light3;
         }
 
         .label {
-            color: var(--color-surfacedarker);
+            color: @color-surface-dark2;
+        }
+    }
+
+    .uninstall-button {
+        background-color: @color-accent2;
+
+        &:hover {
+            background-color: @color-accent2-light2;
         }
     }
 }
\ No newline at end of file
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index 0ec3360ef..bfcc247ef 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -54,17 +54,15 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
     return (
         <Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
             <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
-                <div className={styles['header-container']}>
-                    {
-                        typeof title === 'string' && title.length > 0 ?
-                            <div className={styles['title-container']} title={title}>{title}</div>
-                            :
-                            null
-                    }
-                    <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
-                        <Icon className={styles['icon']} icon={'ic_x'} />
-                    </Button>
-                </div>
+                <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
+                    <Icon className={styles['icon']} icon={'ic_x'} />
+                </Button>
+                {
+                    typeof title === 'string' && title.length > 0 ?
+                        <div className={styles['title-container']} title={title}>{title}</div>
+                        :
+                        null
+                }
                 <div className={styles['modal-dialog-content']}>
                     {children}
                 </div>
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index d14526017..41066d014 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -1,8 +1,10 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .modal-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-backgrounddark40);
+    background-color: @color-background-dark5-40;
 
     .modal-dialog-container {
         flex: none;
@@ -10,57 +12,47 @@
         flex-direction: column;
         max-width: 80%;
         max-height: 80%;
-        background-color: var(--color-surfacelighter);
+        background-color: @color-surface-light5;
 
-        .header-container {
+        .close-button-container {
             flex: none;
-            align-self: stretch;
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            padding: 0.2rem 0.2rem 0;
+            align-self: flex-end;
+            width: 2rem;
+            height: 2rem;
+            margin: 0.2rem 0.2rem 0 0;
+            padding: 0.5rem;
 
-            .title-container {
-                flex: 1;
-                align-self: center;
-                max-height: 2.4em;
-                padding: 0 0.5rem;
-                font-size: 1.2rem;
-                color: var(--color-backgrounddarker);
+            .icon {
+                display: block;
+                width: 100%;
+                height: 100%;
+                fill: @color-surface-dark1;
             }
 
-            .close-button-container {
-                flex: none;
-                align-self: flex-start;
-                width: 2rem;
-                height: 2rem;
-                padding: 0.5rem;
-
+            &:hover, &:focus {
                 .icon {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    fill: var(--color-surfacedark);
-                }
-
-                &:hover, &:focus {
-                    background-color: var(--color-surfacelight);
-
-                    .icon {
-                        fill: var(--color-surfacedarker);
-                    }
-                }
-
-                &:focus {
-                    outline-color: var(--color-surfacedark);
+                    fill: @color-surface-light1;
                 }
             }
+
+            &:focus {
+                outline-color: @color-background-dark5;
+            }
+        }
+
+        .title-container {
+            flex: 1 0 auto;
+            max-height: 2.4em;
+            margin: 0 2rem;
+            font-size: 1.2rem;
+            font-weight: 500;
+            color: @color-background-dark5-90;
         }
 
         .modal-dialog-content {
             flex: 1;
             align-self: stretch;
-            margin: 2rem 1rem 0;
+            margin: 1.5rem 1rem 0;
             padding: 0 1rem;
             overflow-y: auto;
 
@@ -72,7 +64,7 @@
         .buttons-container {
             flex: none;
             align-self: stretch;
-            margin: 1rem 2rem 0;
+            margin: 2rem 2rem 0;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
@@ -90,17 +82,15 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
-    background-color: var(--color-signal5);
-
-    &:focus {
-        outline-width: calc(1.5 * var(--focus-outline-size));
-        outline-color: var(--color-surfacelighter);
-        outline-offset: calc(-2 * var(--focus-outline-size));
-    }
+    padding: 1.2rem;
+    background-color: @color-accent3;
 
     &:hover {
-        filter: brightness(1.2);
+        background-color: @color-accent3-light2;
+    }
+
+    &:focus {
+        outline-color: @color-background-dark5;
     }
 
     &:not(:last-child) {
@@ -112,7 +102,7 @@
         width: 1.2rem;
         height: 1.2rem;
         margin-right: .5rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
     }
 
     .label {
@@ -122,6 +112,6 @@
         max-height: 3.6em;
         font-size: 1.1rem;
         text-align: center;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
     }
 }
\ No newline at end of file
diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index dabe71f1e..2fd906d0c 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -25,7 +25,7 @@ const SharePrompt = ({ className, url }) => {
         if (routeFocused && inputRef.current !== null) {
             inputRef.current.select();
         }
-    }, []);
+    }, [routeFocused]);
     return (
         <div className={classnames(className, styles['share-prompt-container'])}>
             <div className={styles['buttons-container']}>
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 7deac93f2..a4ee2b3b3 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,15 +1,12 @@
-.share-prompt-container {
-    min-width: 18rem;
-    background: var(--color-surfacelighter);
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
+.share-prompt-container {
     .buttons-container {
         display: flex;
         flex-direction: row;
 
         .button-container {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: 14rem;
+            flex: 1;
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -20,20 +17,11 @@
                 margin-right: 1rem;
             }
 
-            &:hover {
-                filter: brightness(1.2);
-            }
-
-            &:focus {
-                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                outline-offset: calc(-2 * var(--focus-outline-size));
-            }
-
             .icon {
                 flex: none;
                 height: 1.2rem;
                 margin-right: 1rem;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -41,9 +29,20 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
+                font-size: 1.1rem;
                 font-weight: 500;
                 text-align: center;
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
+            }
+        }
+
+        .facebook-button, .twitter-button {
+            &:hover {
+                filter: brightness(1.2);
+            }
+
+            &:focus {
+                outline-color: @color-background-dark5;
             }
         }
 
@@ -60,15 +59,15 @@
         display: flex;
         flex-direction: row;
         margin-top: 1rem;
-        border: thin solid var(--color-surface);
+        background-color: @color-surface-light2;
 
         .url-text-input {
             flex: 1;
             align-self: stretch;
             padding: 1rem;
-            color: var(--color-backgroundlighter);
+            font-size: 1.1rem;
             text-align: center;
-            border-right: thin solid var(--color-surface);
+            color: @color-background-dark5;
         }
 
         .copy-button {
@@ -79,16 +78,15 @@
             align-items: center;
             justify-content: center;
             width: 8rem;
-            padding: 0.5rem;
-            background-color: var(--color-surface);
+            padding: 1rem;
+            background-color: @color-accent3;
 
             &:hover {
-                filter: brightness(1.2);
+                background-color: @color-accent3-light2;
             }
 
             &:focus {
-                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                outline-offset: calc(-1.5 * var(--focus-outline-size));
+                outline-color: @color-background-dark5;
             }
 
             .icon {
@@ -96,7 +94,7 @@
                 width: 1.2rem;
                 height: 1.2rem;
                 margin-right: 0.5rem;
-                fill: var(--color-surfacedarker);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -104,7 +102,8 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
-                color: var(--color-surfacedarker);
+                font-size: 1.1rem;
+                color: @color-surface-light5;
             }
         }
     }
diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index 3c97cd1bb..6158a426c 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -85,9 +85,9 @@ const Addon = ({ className, id, name, version, logo, description, types, install
                 <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
                     <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
                 </Button>
-                <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}>
+                <Button className={styles['share-button-container']} title={'SHARE ADDON'} tabIndex={-1} onClick={shareButtonOnClick}>
                     <Icon className={styles['icon']} icon={'ic_share'} />
-                    <div className={styles['label']}>Share addon</div>
+                    <div className={styles['label']}>SHARE ADDON</div>
                 </Button>
             </div>
         </Button>
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index e57eea428..20aba08e7 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -1,16 +1,18 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .addon-container {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 1rem;
-    background-color: var(--color-backgroundlighter);
+    padding: 1.5rem;
+    background-color: @color-background;
     cursor: inherit;
 
     .logo-container {
         flex: none;
-        width: 8rem;
-        height: 8rem;
-        background-color: var(--color-backgrounddarker);
+        width: 6rem;
+        height: 6rem;
+        background-color: @color-surface-light5;
 
         .logo {
             display: block;
@@ -26,7 +28,7 @@
             width: 100%;
             height: 100%;
             padding: 1rem;
-            fill: var(--color-surfacelighter);
+            fill: @color-secondaryvariant1-light3;
         }
     }
 
@@ -47,7 +49,7 @@
             padding: 0 0.5rem;
             max-height: 3.6em;
             font-size: 1.6rem;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5-90;
         }
 
         .version-container {
@@ -57,7 +59,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: var(--color-surfacelight);
+            color: @color-surface-light5-60;
         }
 
         .types-container {
@@ -67,7 +69,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: var(--color-surfacelight);
+            color: @color-surface-light5-40;
             text-transform: capitalize;
         }
 
@@ -78,7 +80,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 4.8em;
-            color: var(--color-surfacelight);
+            color: @color-surface-light5-90;
         }
     }
 
@@ -91,7 +93,7 @@
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            height: 3.5rem;
+            height: 4rem;
             padding: 0 1rem;
 
             &:not(:first-child) {
@@ -100,8 +102,8 @@
 
             .icon {
                 flex: none;
-                width: 1.5rem;
-                height: 1.5rem;
+                width: 2rem;
+                height: 2rem;
                 margin-right: 1rem;
             }
 
@@ -117,57 +119,48 @@
         }
 
         .install-button-container {
-            background-color: var(--color-signal5);
+            background-color: @color-accent3;
 
             &:hover {
-                filter: brightness(1.2);
+                background-color: @color-accent3-light2;
             }
 
             .label {
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
             }
         }
 
         .uninstall-button-container {
-            outline-color: var(--color-surfacedark);
+            outline-color: @color-background-light3;
             outline-style: solid;
 
             &:hover {
-                outline-color: var(--color-surfacelight);
-
-                .label {
-                    color: var(--color-surfacelight);
-                }
+                background-color: @color-background-light2;
             }
 
             .label {
-                color: var(--color-surfacedark);
+                color: @color-surface-light5-90;
             }
         }
 
         .share-button-container {
-            outline-color: var(--color-secondarylighter);
-            outline-style: solid;
-
             &:hover {
-                outline: none;
-                background: var(--color-secondarylight);
-
                 .icon {
-                    fill: var(--color-surfacelighter);
+                    fill: @color-secondaryvariant1-light1;
                 }
 
                 .label {
-                    color: var(--color-surfacelighter);
+                    text-decoration: underline;
+                    color: @color-secondaryvariant1-light2;
                 }
             }
 
             .icon {
-                fill: var(--color-secondarylighter);
+                fill: @color-secondaryvariant1-dark1-60;
             }
 
             .label {
-                color: var(--color-secondarylighter);
+                color: @color-secondaryvariant1-90;
             }
         }
     }
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index a953a62d4..8826f28dc 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const { useRouteFocused } = require('stremio-router');
 const Icon = require('stremio-icons/dom');
-const { AddonDetailsModal, Button, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
 const Addon = require('./Addon');
 const useAddons = require('./useAddons');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -64,15 +64,20 @@ const Addons = ({ urlParams, queryParams }) => {
     const searchInputOnChange = React.useCallback((event) => {
         setSearch(event.currentTarget.value);
     }, []);
-    const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
-    const clearSharedTransportUrl = React.useCallback(() => {
-        setSharedTransportUrl(null);
+    const [sharedAddon, setSharedAddon] = React.useState(null);
+    const renderLogoFallback = React.useMemo(() => () => {
+        return (
+            <Icon className={styles['icon']} icon={'ic_addons'} />
+        );
+    }, []);
+    const clearSharedAddon = React.useCallback(() => {
+        setSharedAddon(null);
     }, []);
     const onAddonShare = React.useCallback((event) => {
-        setSharedTransportUrl(event.dataset.transportUrl);
+        setSharedAddon(event.dataset.addon);
     }, []);
     const onAddonToggle = React.useCallback((event) => {
-        navigate({ detailsTransportUrl: event.dataset.transportUrl });
+        navigate({ detailsTransportUrl: event.dataset.addon.transportUrl });
     }, [navigate]);
     const closeAddonDetails = React.useCallback(() => {
         navigate({ detailsTransportUrl: null });
@@ -80,7 +85,7 @@ const Addons = ({ urlParams, queryParams }) => {
     React.useLayoutEffect(() => {
         closeAddAddonModal();
         setSearch('');
-        clearSharedTransportUrl();
+        clearSharedAddon();
     }, [urlParams, queryParams]);
     return (
         <MainNavBars className={styles['addons-container']} route={'addons'}>
@@ -97,15 +102,16 @@ const Addons = ({ urlParams, queryParams }) => {
                             className={styles['select-input-container']}
                         />
                     ))}
+                    <div className={styles['spacing']} />
                     <label className={styles['search-bar-container']}>
-                        <Icon className={styles['icon']} icon={'ic_search'} />
                         <TextInput
                             className={styles['search-input']}
                             type={'text'}
-                            placeholder={'Search addons...'}
+                            placeholder={'Search addons'}
                             value={search}
                             onChange={searchInputOnChange}
                         />
+                        <Icon className={styles['icon']} icon={'ic_search'} />
                     </label>
                 </div>
                 {
@@ -152,7 +158,7 @@ const Addons = ({ urlParams, queryParams }) => {
                                                         installed={addon.installed}
                                                         onToggle={onAddonToggle}
                                                         onShare={onAddonShare}
-                                                        dataset={{ transportUrl: addon.transportUrl }}
+                                                        dataset={{ addon }}
                                                     />
                                                 ))
                                         }
@@ -166,11 +172,12 @@ const Addons = ({ urlParams, queryParams }) => {
                         title={'Add addon'}
                         buttons={addAddonModalButtons}
                         onCloseRequest={closeAddAddonModal}>
+                        <div className={styles['notice']}>You can add an addon via an external link, which will appear under Installed addons.</div>
                         <TextInput
                             ref={addAddonUrlInputRef}
                             className={styles['addon-url-input']}
                             type={'text'}
-                            placeholder={'Paste url...'}
+                            placeholder={'Paste addon URL'}
                             onSubmit={addAddonOnSubmit}
                         />
                     </ModalDialog>
@@ -178,14 +185,31 @@ const Addons = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                typeof sharedTransportUrl === 'string' ?
+                sharedAddon !== null ?
                     <ModalDialog
                         className={styles['share-modal-container']}
-                        title={'Share addon'}
-                        onCloseRequest={clearSharedTransportUrl}>
+                        title={'Share Addon'}
+                        onCloseRequest={clearSharedAddon}>
+                        <div className={styles['title-container']}>
+                            <Image
+                                className={styles['logo']}
+                                src={sharedAddon.manifest.logo}
+                                alt={' '}
+                                renderFallback={renderLogoFallback}
+                            />
+                            <div className={styles['name-container']}>
+                                <span className={styles['name']}>{typeof sharedAddon.manifest.name === 'string' && sharedAddon.manifest.name.length > 0 ? sharedAddon.manifest.name : sharedAddon.manifest.id}</span>
+                                {
+                                    typeof sharedAddon.manifest.version === 'string' && sharedAddon.manifest.version.length > 0 ?
+                                        <span className={styles['version']}>v. {sharedAddon.manifest.version}</span>
+                                        :
+                                        null
+                                }
+                            </div>
+                        </div>
                         <SharePrompt
                             className={styles['share-prompt-container']}
-                            url={sharedTransportUrl}
+                            url={sharedAddon.transportUrl}
                         />
                     </ModalDialog>
                     :
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index c69c83ce8..ff90eaed2 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -1,24 +1,33 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Multiselect/styles.less') {
     multiselect-menu-container: menu-container;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    addon-modal-content: modal-dialog-content;
+    cancel-button-label: label;
+}
+
 .addons-container {
     width: 100%;
     height: 100%;
-    background-color: var(--color-background);
+    background-color: @color-background-dark2;
 
     .addons-content {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
+        align-self: stretch;
 
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
             display: flex;
             flex-direction: row;
-            padding: 1.5rem;
+            justify-content: space-between;
+            padding: 1.5rem 3rem;
             overflow: visible;
 
             .add-button-container {
@@ -26,14 +35,19 @@
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                height: 3rem;
-                max-width: 15rem;
+                justify-content: center;
+                width: 10rem;
+                height: 3.5rem;
                 margin-right: 1.5rem;
                 padding: 0 1rem;
-                background-color: var(--color-signal5);
+                background-color: @color-accent3;
 
                 &:hover {
-                    filter: brightness(1.2);
+                    background-color: @color-accent3-light2;
+                }
+
+                &:focus {
+                    outline-color: @color-surface-light5;
                 }
 
                 .icon {
@@ -41,7 +55,7 @@
                     width: 1.2rem;
                     height: 1.2rem;
                     margin-right: 1rem;
-                    fill: var(--color-surfacelighter);
+                    fill: @color-surface-light5;
                 }
 
                 .add-button-label {
@@ -50,7 +64,7 @@
                     flex-basis: auto;
                     max-height: 2.4em;
                     font-size: 1.1rem;
-                    color: var(--color-surfacelighter);
+                    color: @color-surface-light5;
                 }
             }
 
@@ -58,7 +72,7 @@
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: 15rem;
-                height: 3rem;
+                height: 3.5rem;
                 margin-right: 1.5rem;
 
                 .multiselect-menu-container {
@@ -67,40 +81,52 @@
                 }
             }
 
+            .spacing {
+                flex: 1;
+            }
+
             .search-bar-container {
                 flex-grow: 0;
                 flex-shrink: 1;
-                flex-basis: 15rem;
+                flex-basis: 18rem;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                height: 3rem;
+                height: 3.5rem;
                 padding: 0 1rem;
-                background-color: var(--color-backgroundlighter);
+                border-radius: 2.3rem;
+                border: var(--focus-outline-size) solid transparent;
+                background-color: @color-background;
                 cursor: text;
 
                 &:hover, &:focus-within {
-                    filter: brightness(1.2);
+                    background-color: @color-background-light2;
                 }
 
-                .icon {
-                    flex: none;
-                    width: 1.2rem;
-                    height: 1.2rem;
-                    margin-right: 1rem;
-                    fill: var(--color-surfacelighter);
+                &:focus-within {
+                    border: var(--focus-outline-size) solid @color-surface-light5;
                 }
 
                 .search-input {
                     flex: 1;
-                    color: var(--color-surfacelighter);
+                    margin-right: 1rem;
+                    font-size: 1.1rem;
+                    color: @color-surface-light5;
 
                     &::placeholder {
                         max-height: 1.2em;
                         opacity: 1;
-                        color: var(--color-surfacelight);
+                        color: @color-secondaryvariant1-light1-90;
                     }
                 }
+
+                .icon {
+                    flex: none;
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    fill: @color-secondaryvariant1;
+                }
+
             }
         }
 
@@ -109,13 +135,13 @@
             align-self: stretch;
             padding: 0 1.5rem;
             font-size: 2rem;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5;
         }
 
         .addons-list-container {
             flex: 1;
             align-self: stretch;
-            padding: 0 1.5rem;
+            padding: 0 3rem;
             overflow-y: auto;
 
             .addon {
@@ -126,20 +152,105 @@
 }
 
 .add-addon-modal-container {
-    .addon-url-input {
-        width: 25rem;
-        padding: 0.5rem 1rem;
-        color: var(--color-surfacedark);
-        border: thin solid var(--color-surface);
+    .addon-modal-content {
+        width: 30rem;
+
+        .notice {
+            margin-bottom: 1.5rem;
+            font-size: 1rem;
+            color: @color-background-dark5-90;
+        }
+
+        .addon-url-input {
+            width: 100%;
+            padding: 1rem;
+            color: @color-surface-dark5;
+            outline: var(--focus-outline-size) solid @color-surface-light2;
+            outline-offset: calc(-1 * var(--focus-outline-size));
+
+            &:hover {
+                outline-color: @color-surface-light4;
+            }
+
+            &:focus {
+                outline-color: @color-background-dark5;
+            }
+        }
     }
 
     .cancel-button {
-        background-color: var(--color-surfacedark);
+        background-color: transparent;
+
+        &:hover {
+            background-color: @color-surface-light3;
+        }
+
+        &:focus {
+            outline-color: @color-background-dark5;
+        }
+
+        .cancel-button-label {
+            color: @color-surface-dark2;
+        }
     }
 }
 
 .share-modal-container {
-    .share-prompt-container {
-        width: 25rem;
+    .addon-modal-content {
+        width: 30rem;
+
+        .title-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .logo, .icon {
+                float: left;
+                width: 5rem;
+                height: 5rem;
+                margin-right: 1.5rem;
+                padding: 0.5rem;
+            }
+
+            .logo {
+                object-fit: contain;
+                object-position: center;
+            }
+
+            .icon {
+                fill: @color-secondaryvariant1-light3;
+            }
+
+            .name-container {
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: 0;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                align-items: baseline;
+
+                .name {
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    margin-right: 0.5rem;
+                    font-size: 1.6rem;
+                    color: @color-background-dark5-90;
+                }
+
+                .version {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    margin-top: 0.5rem;
+                    color: @color-background-dark5-60;
+                }
+            }
+        }
+
+        .share-prompt-container {
+            margin-top: 1rem;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 0b4eee6aa..bd00249f0 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -248,7 +248,7 @@ const Intro = ({ queryParams }) => {
     const switchFormOnClick = React.useCallback(() => {
         const nextQueryParams = new URLSearchParams(queryParams);
         nextQueryParams.set('form', state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM);
-        window.location.replace(`#/intro?${nextQueryParams}`);
+        window.location = `#/intro?${nextQueryParams}`;
     }, [queryParams, state.form]);
     React.useEffect(() => {
         if ([LOGIN_FORM, SIGNUP_FORM].includes(queryParams.get('form'))) {