diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js
index 7f6bca976..d4ca31489 100644
--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@@ -49,20 +49,32 @@ import {
 } from './styles';
 import { fontWeight } from '../../utils/styles/sizes';
 
-const getInitialsName = (name: string) =>
-  name
-    .split(' ')
-    .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
-    .toUpperCase();
+// const getInitialsName = (name: string) =>
+//   name
+//     .split(' ')
+//     .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
+//     .toUpperCase();
 
-const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<WrapperLink> => {
-  console.log(unpackedSize);
-  const renderVersionInfo = () => version && (
-        <OverviewItem>
-          <Icon name={'version'} />
-          {`v${version}`}
-        </OverviewItem>
-      );
+const Package = ({
+  name: label,
+  version,
+  dist: { unpackedSize } = {},
+  time,
+  author: { name, avatar },
+  description,
+  license,
+  keywords = [],
+  homepage,
+  bugs,
+}: IProps): Element<WrapperLink> => {
+  console.log(homepage);
+  const renderVersionInfo = () =>
+    version && (
+      <OverviewItem>
+        <Icon name={'version'} />
+        {`v${version}`}
+      </OverviewItem>
+    );
 
   const renderAuthorInfo = () => {
     return (
@@ -73,19 +85,16 @@ const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, auth
         </Details>
       </Author>
     );
-<<<<<<< HEAD
-  };
-=======
   }
 
-  const renderFileSize = () => unpackedSize && (
-    <OverviewItem>
-      <Icon name={'filebinary'} />
-      {fileSizeSI(unpackedSize)}
-    </OverviewItem>
-  );
+  const renderFileSize = () =>
+    unpackedSize && (
+      <OverviewItem>
+        <Icon name={'filebinary'} />
+        {fileSizeSI(unpackedSize)}
+      </OverviewItem>
+    );
 
->>>>>>> b4b8d6b0... wip
   const renderLicenseInfo = () =>
     license && (
       <OverviewItem>
@@ -137,34 +146,50 @@ const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, auth
     </Tag>
   ));
 
+  const renderHomePageLink = () =>
+    homepage && (
+      <a href={homepage} target="_blank">
+        <Tooltip title="Visit homepage" aria-label="Add">
+          <IconButton aria-label="Report" style={{ padding: '6px' }}>
+            <HomeIcon fontSize="small" style={{ fontSize: '16px' }} />
+          </IconButton>
+        </Tooltip>
+      </a>
+    );
+
+  const renderBugsLink = () =>
+    bugs &&
+    bugs.url && (
+      <a href={bugs.url} target="_blank">
+        <Tooltip title="Open an issue" aria-label="Add">
+          <IconButton aria-label="Report" style={{ padding: '6px' }}>
+            <BugReport fontSize="small" style={{ fontSize: '16px' }} />
+          </IconButton>
+        </Tooltip>
+      </a>
+    );
+
   return (
-    <List style={{ padding: '12px 0 12px 0'}}>
+    <List style={{ padding: '12px 0 12px 0' }}>
       <ListItem alignItems="flex-start">
-        {/* <ListItemAvatar>
-          <Avatar2 alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-        </ListItemAvatar> */}
-        <ListItemText component="div" style={{ paddingRight: 0}}
+        <ListItemText
+          component="div"
+          style={{ paddingRight: 0 }}
           primary={
             <Grid item xs={12} container>
               <Grid item xs>
-                <PackageName>{label}</PackageName>
+                <WrapperLink to={`/-/web/detail/${label}`}>
+                  <PackageName>{label}</PackageName>
+                </WrapperLink>
               </Grid>
-              <Grid item xs style={{ textAlign: "right" }}>
-                <Tooltip title="Visit homepage" aria-label="Add">
-                  <IconButton aria-label="Report" style={{ padding: '6px' }}>
-                    <HomeIcon fontSize="small" style={{ fontSize: '16px' }} />
-                  </IconButton>
-                </Tooltip> 
-                <Tooltip title="Open an issue" aria-label="Add">
-                  <IconButton aria-label="Report" style={{ padding: '6px' }}>
-                    <BugReport fontSize="small" style={{ fontSize: '16px' }} />
-                  </IconButton>   
-                </Tooltip>
-                <Tooltip title="Pin it" aria-label="Add">
-                  <IconButton aria-label="Report" style={{ padding: '6px' }}>
-                    <BookmarkBorder fontSize="small" style={{ fontSize: '16px' }} />
-                  </IconButton>
-                </Tooltip>          
+              <Grid item xs style={{ textAlign: 'right' }}>
+                {renderHomePageLink()}
+                {renderBugsLink()}
+                {/* <Tooltip title="Pin it" aria-label="Add">
+                    <IconButton aria-label="Report" style={{ padding: '6px' }}>
+                      <BookmarkBorder fontSize="small" style={{ fontSize: '16px' }} />
+                    </IconButton>
+                  </Tooltip>           */}
               </Grid>
             </Grid>
           }
@@ -173,9 +198,7 @@ const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, auth
               <Typography component="span" style={{ color: '#586069', fontSize: '14px', paddingRight: 0 }}>
                 {description}
               </Typography>
-              {tags.length > 0 && <span style={{ marginTop: '8px', display: 'block' }}>
-                {tags}
-              </span>}
+              {tags.length > 0 && <span style={{ marginTop: '8px', display: 'block' }}>{tags}</span>}
             </React.Fragment>
           }
         />
diff --git a/src/webui/components/Package/styles.js b/src/webui/components/Package/styles.js
index 0ae468d74..258ad07af 100644
--- a/src/webui/components/Package/styles.js
+++ b/src/webui/components/Package/styles.js
@@ -161,41 +161,41 @@ export const Footer = styled.div`
 // Container
 export const WrapperLink = styled(Link)`
   && {
-    font-size: 12px;
-    background-color: white;
-    margin: 0 0 15px 0;
-    transition: box-shadow 0.15s;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
-    border-radius: 3px;
-    padding: 10px;
+    // font-size: 12px;
+    // background-color: white;
+    // margin: 0 0 15px 0;
+    // transition: box-shadow 0.15s;
+    // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    // border-radius: 3px;
+    // padding: 10px;
     text-decoration: none;
-    display: block;
-    color: #2f273c;
-    ${mq.medium(css`
-      ${Header} {
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-      }
-      ${OverviewItem} {
-        margin: 0 0 0 0;
-      }
-      ${Overview} {
-        flex-direction: row;
-        ${OverviewItem} {
-          :first-child {
-            margin: 0;
-          }
-        }
-      }
-      ${Footer} {
-        display: block;
-      }
-      ${Published} {
-        display: inline-block;
-      }
-    `)};
-  }
+  //   display: block;
+  //   color: #2f273c;
+  //   ${mq.medium(css`
+  //     ${Header} {
+  //       flex-direction: row;
+  //       justify-content: space-between;
+  //       align-items: center;
+  //     }
+  //     ${OverviewItem} {
+  //       margin: 0 0 0 0;
+  //     }
+  //     ${Overview} {
+  //       flex-direction: row;
+  //       ${OverviewItem} {
+  //         :first-child {
+  //           margin: 0;
+  //         }
+  //       }
+  //     }
+  //     ${Footer} {
+  //       display: block;
+  //     }
+  //     ${Published} {
+  //       display: inline-block;
+  //     }
+  //   `)};
+  // }
 `;
 
 /**
diff --git a/src/webui/components/PackageList/index.js b/src/webui/components/PackageList/index.js
index ab607e40a..b32f8b179 100644
--- a/src/webui/components/PackageList/index.js
+++ b/src/webui/components/PackageList/index.js
@@ -25,13 +25,13 @@ export default class PackageList extends React.Component {
     const { packages } = this.props;
     return (
       packages.map((pkg, i) => {
-        const { name, version, description, time, keywords, dist } = pkg;
+        const { name, version, description, time, keywords, dist, homepage, bugs } = pkg;
         const author = pkg.author;
         const license = formatLicense(pkg.license);
         return (
           <React.Fragment key={i}>
             {i !== 0 && <Divider style={{ margin: 0 }}></Divider>}
-            <Package {...{ name, dist, version, author, description, license, time, keywords }} />
+            <Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
           </React.Fragment>
         );
       })