diff --git a/src/common/Addon/Addon.js b/src/common/Addon/Addon.js
index b0282fa9c..010844f81 100644
--- a/src/common/Addon/Addon.js
+++ b/src/common/Addon/Addon.js
@@ -10,7 +10,7 @@ const renderName = (name) => {
     }
 
     return (
-        <span className={styles['name']}>{name}</span>
+        <div className={styles['name']}>{name}</div>
     );
 }
 
@@ -20,9 +20,7 @@ const renderVersion = (version) => {
     }
 
     return (
-        <div className={styles['version-container']}>
-            <div className={styles['version']}>{'v. ' + version}</div>
-        </div>
+        <div className={styles['version']}>{'v. ' + version}</div>
     );
 }
 
@@ -57,7 +55,7 @@ const renderUrls = (urls) => {
         <div className={styles['urls-container']}>
             {urls.map((url) => {
                 return (
-                    <span key={url} className={styles['url']}>{url}</span>
+                    <div key={url} className={styles['url']}>{url}</div>
                 );
             })}
         </div>
@@ -66,26 +64,28 @@ const renderUrls = (urls) => {
 
 const Addon = (props) => {
     return (
-        <div className={styles['addon']}>
-            <div className={styles['info-container']}>
+        <div className={styles['addon-container']}>
+            <div className={styles['addon']}>
                 <div className={styles['logo-container']}>
                     <Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
                 </div>
-                <div className={styles['header']}>
-                    {renderName(props.name)}
-                    {renderVersion(props.version)}
+                <div className={styles['header-container']}>
+                    <div className={styles['header']}>
+                        {renderName(props.name)}
+                        {renderVersion(props.version)}
+                    </div>
                 </div>
                 {renderType(props.types)}
                 {renderDescription(props.description)}
-            </div>
-            {renderUrls(props.urls)}
-            <div className={styles['buttons']}>
-                <div onClick={props.shareAddon} className={classnames(styles['button-container'], styles['share-button'])}>
-                    <Icon className={styles['icon']} icon={'ic_share'} />
-                    <span className={styles['label']}>SHARE ADD-ON</span>
-                </div>
-                <div onClick={props.onToggleClicked} className={classnames(styles['button-container'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])}>
-                    <span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
+                {renderUrls(props.urls)}
+                <div className={styles['buttons']}>
+                    <div onClick={props.shareAddon} className={classnames(styles['button'], styles['share-button'])}>
+                        <Icon className={styles['icon']} icon={'ic_share'} />
+                        <span className={styles['label']}>SHARE ADD-ON</span>
+                    </div>
+                    <div onClick={props.onToggleClicked} className={classnames(styles['button'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])}>
+                        <span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less
index ef2ef58ec..3dade61ad 100644
--- a/src/common/Addon/styles.less
+++ b/src/common/Addon/styles.less
@@ -1,59 +1,65 @@
 @import 'stremio-colors';
 
-.addon {
-    width: 550px;
-    padding: 18px;
-    font-size: 12px;
-    color: @colorwhite;
-    font-family: LatoLight;
+@addon-width: 514px;
+@addon-padding: 18px;
+
+@logo-width: floor((@addon-width * 0.2));
+
+.addon-container {
+    width: (@addon-width + (2 * @addon-padding));
+    padding: @addon-padding;
     background-color: @colorglass;
 
-    .info-container {
+    .addon {
+        width: @addon-width;
         display: grid;
-        margin-bottom: 26px;
-        grid-template-columns: 80px 14px 420px;
-        grid-template-rows: 22px 2px 18px 2px 36px auto;
+        grid-template-columns: 1fr 4fr;
+        grid-template-rows: floor((@logo-width * 0.25)) floor((@logo-width * 0.20)) auto auto ceil((@addon-width * 0.08));
         grid-template-areas:
-            "logo . header"
-            "logo . ."
-            "logo . type"
-            "logo . ."
-            "logo . description"
-            "logo . description";
+            "logo header"
+            "logo type"
+            "logo description"
+            "urls urls"
+            "buttons buttons";
 
         .logo-container {
             grid-area: logo;
-            display: flex;
 
             .logo {
-                width: 100%;
-                height: 80px;
+                width: @logo-width;
+                height: @logo-width;
                 padding: 20%;
-                background-color: @colordarkest;
                 fill: @colorwhite;
+                background-color: @colordarkest;
             }
         }
 
-        .header {
+        .header-container {
             grid-area: header;
             display: flex;
+            align-items: center;
+            overflow: hidden;
+            padding-left: 4%;
 
-            .name {
-                font-size: 20px;
-                max-width: 350px;
-                overflow: hidden;
-                white-space: pre;
-                margin-right: 10px;
-                text-overflow: ellipsis;
-            }
+            .header {
+                width: 100%;
+                display: flex;
+                align-items: baseline;
 
-            .version-container {
-                flex: 1;
-                overflow: hidden;
-                color: @colorwhite60;
+                .name {
+                    max-width: 80%;
+                    margin-right: 3%;
+                    font-size: 20px;
+                    color: @colorwhite;
+                    overflow: hidden;
+                    white-space: pre;
+                    text-overflow: ellipsis;
+                }
 
                 .version {
-                    margin-top: 4px;
+                    flex: 1;
+                    font-size: 12px;
+                    color: @colorwhite60;
                     overflow: hidden;
                     white-space: pre;
                     text-overflow: ellipsis;
@@ -63,92 +69,101 @@
 
         .type {
             grid-area: type;
+            display: flex;
+            align-items: center;
+            padding-left: 4%;
+            font-size: 12px;
             color: @coloraccent;
         }
 
         .description {
             grid-area: description;
+            padding-left: 4%;
+            font-size: 12px;
+            color: @colorwhite;
         }
-    }
 
-    .urls-container {
-        display: flex;
-        overflow: auto;
-        flex-direction: column;
+        .urls-container {
+            grid-area: urls;
+            padding: 4% 0%;
+            font-size: 12px;
+            overflow: auto;
+            word-break: break-all;
 
-        .url {
-            color: @colorwhite60;
+            .url {
+                color: @colorwhite60;
+            }
         }
-    }
 
-    .buttons {
-        display: flex;
-        margin-top: 26px;
-        justify-content: space-between;
-
-        .button-container {
-            width: 230px;
+        .buttons {
+            grid-area: buttons;
             display: flex;
-            cursor: pointer;
-            padding: 10px 0px;
-            align-items: center;
-            justify-content: center;
-            border: 2px solid;
+            align-items: stretch;
+            justify-content: space-between;
 
-            .icon {
-                width: 18px;
-                margin-right: 6px;
-            }
-
-            .label {
-                font-weight: 600;
-                font-size: 14px;
-            }
-
-            &.share-button {
-                border-color: @coloraccent;
+            .button {
+                width: 46%;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 2px solid;
 
                 .icon {
-                    fill: @coloraccent;
+                    width: 7%;
+                    margin-right: 2%;
                 }
 
                 .label {
-                    color: @coloraccent;
+                    font-size: 14px;
+                    color: @colorwhite;
                 }
 
-                &:hover {
-                    background-color: @coloraccent;
+                &.share-button {
+                    border-color: @coloraccent;
 
                     .icon {
-                        fill: @colorwhite;
+                        fill: @coloraccent;
                     }
 
                     .label {
-                        color: @colorwhite;
+                        color: @coloraccent;
+                    }
+
+                    &:hover {
+                        background-color: @coloraccent;
+
+                        .icon {
+                            fill: @colorwhite;
+                        }
+
+                        .label {
+                            color: @colorwhite;
+                        }
                     }
                 }
-            }
 
-            &.install-button {
-                border-color: @colorsignal5;
-                background-color: @colorsignal5;
+                &.install-button {
+                    border-color: @colorsignal5;
+                    background-color: @colorsignal5;
+
+                    &:hover {
+                        background-color: @colorsignal580;
+                    }
+                }
+
+                &.uninstall-button {
+                    border-color: @colorneutral;
+
+                    &:hover {
+                        background-color: @colorneutral;
+                    }
+                }
 
                 &:hover {
-                    background-color: @colorsignal580;
+                    border: none;
                 }
             }
-
-            &.uninstall-button {
-                border-color: @colorneutral;
-
-                &:hover {
-                    background-color: @colorneutral;
-                }
-            }
-
-            &:hover {
-                border: none;
-            }
         }
     }
 }
\ No newline at end of file