diff --git a/src/api/web/api.js b/src/api/web/api.js
index d7a54bc1c..ce11220f2 100644
--- a/src/api/web/api.js
+++ b/src/api/web/api.js
@@ -73,7 +73,7 @@ module.exports = function(config, auth, storage) {
   });
 
   // Get package readme
-  route.get('/package/readme(/@:scope?)?/:package/:version?', can('access'), function(req, res, next) {
+  route.get('/package/readme/(@:scope/)?:package/:version?', can('access'), function(req, res, next) {
     let packageName = req.params.package;
     if (req.params.scope) {
       packageName = `@${req.params.scope}/${packageName}`;
@@ -147,9 +147,14 @@ module.exports = function(config, auth, storage) {
     res.redirect(base);
   });
 
-  route.get('/sidebar(/@:scope?)?/:package', function(req, res, next) {
+  route.get('/sidebar/(@:scope/)?:package', function(req, res, next) {
+    let packageName = req.params.package;
+    if (req.params.scope) {
+      packageName = `@${req.params.scope}/${packageName}`;
+    }
+
     storage.get_package({
-      name: req.params.package,
+      name: packageName,
       keepUpLinkData: true,
       req,
       callback: function(err, info) {
diff --git a/src/webui/src/components/PackageDetail/index.js b/src/webui/src/components/PackageDetail/index.js
index 404fb5ae1..c73d5b817 100644
--- a/src/webui/src/components/PackageDetail/index.js
+++ b/src/webui/src/components/PackageDetail/index.js
@@ -7,7 +7,6 @@ import Readme from '../Readme';
 import classes from './packageDetail.scss';
 
 const PackageDetail = (props) => {
-
  const displayState = (readMe) => {
    if (isNil(readMe)) {
      return;
diff --git a/src/webui/src/modules/detail/index.js b/src/webui/src/modules/detail/index.js
index a286111ae..89367c248 100644
--- a/src/webui/src/modules/detail/index.js
+++ b/src/webui/src/modules/detail/index.js
@@ -22,9 +22,14 @@ export default class Detail extends React.Component {
     notFound: false,
   };
 
+  get packageName() {
+    let params = this.props.match.params;
+    return `${(params.scope && '@' + params.scope + '/') || ''}${params.package}`;
+  }
+
   async componentDidMount() {
      try {
-       const resp = await API.get(`package/readme/${this.props.match.params.package}`);
+       const resp = await API.get(`package/readme/${this.packageName}`);
        this.setState({
          readMe: resp.data
        });
@@ -37,15 +42,14 @@ export default class Detail extends React.Component {
 
   render() {
     if (this.state.notFound) {
-      return <NotFound
-          pkg={this.props.match.params.package}/>;
+      return <NotFound pkg={this.packageName}/>;
     } else if (isEmpty(this.state.readMe)) {
       return <Loading text={loadingMessage} />;
     }
     return (
       <div className={classes.twoColumn}>
-        <PackageDetail readMe={this.state.readMe} package={this.props.match.params.package}/>
-        <PackageSidebar packageName={this.props.match.params.package} />
+        <PackageDetail readMe={this.state.readMe} package={this.packageName}/>
+        <PackageSidebar packageName={this.packageName} />
       </div>
     );
   }
diff --git a/src/webui/src/router.js b/src/webui/src/router.js
index 5d2886b6e..e918f6f30 100644
--- a/src/webui/src/router.js
+++ b/src/webui/src/router.js
@@ -13,7 +13,8 @@ const RouterApp = () => {
         <div className="container">
           <Switch>
             <Route exact path="/(search/:keyword)?" component={ Home } />
-            <Route path="/detail/:package*" component={Detail} />
+            <Route exact path="/detail/@:scope/:package" component={Detail} />
+            <Route exact path="/detail/:package" component={Detail} />
           </Switch>
         </div>
       </div>