diff --git a/packages/api/src/controllers/plugins.js b/packages/api/src/controllers/plugins.js
index 6d579c69f..1961a6c09 100644
--- a/packages/api/src/controllers/plugins.js
+++ b/packages/api/src/controllers/plugins.js
@@ -6,23 +6,23 @@ const socket = require('../utility/socket');
 const requirePlugin = require('../shell/requirePlugin');
 const downloadPackage = require('../utility/downloadPackage');
 
-async function loadPackageInfo(dir) {
-  const readmeFile = path.join(dir, 'README.md');
-  const packageFile = path.join(dir, 'package.json');
+// async function loadPackageInfo(dir) {
+//   const readmeFile = path.join(dir, 'README.md');
+//   const packageFile = path.join(dir, 'package.json');
 
-  if (!(await fs.exists(packageFile))) {
-    return null;
-  }
+//   if (!(await fs.exists(packageFile))) {
+//     return null;
+//   }
 
-  let readme = null;
-  let manifest = null;
-  if (await fs.exists(readmeFile)) readme = await fs.readFile(readmeFile, { encoding: 'utf-8' });
-  if (await fs.exists(packageFile)) manifest = JSON.parse(await fs.readFile(packageFile, { encoding: 'utf-8' }));
-  return {
-    readme,
-    manifest,
-  };
-}
+//   let readme = null;
+//   let manifest = null;
+//   if (await fs.exists(readmeFile)) readme = await fs.readFile(readmeFile, { encoding: 'utf-8' });
+//   if (await fs.exists(packageFile)) manifest = JSON.parse(await fs.readFile(packageFile, { encoding: 'utf-8' }));
+//   return {
+//     readme,
+//     manifest,
+//   };
+// }
 
 module.exports = {
   script_meta: 'get',
@@ -46,11 +46,28 @@ module.exports = {
 
   info_meta: 'get',
   async info({ packageName }) {
-    const dir = path.join(pluginstmpdir(), packageName);
-    if (!(await fs.exists(dir))) {
-      await downloadPackage(packageName, dir);
+    try {
+      const infoResp = await axios.default.get(`https://registry.npmjs.org/${packageName}`);
+      const { latest } = infoResp.data['dist-tags'];
+      const manifest = infoResp.data.versions[latest];
+      const { readme } = infoResp.data;
+
+      return {
+        readme,
+        manifest,
+      };
+    } catch (err) {
+      return {
+        state: 'error',
+        error: err.message,
+      };
     }
-    return await loadPackageInfo(dir);
+
+    // const dir = path.join(pluginstmpdir(), packageName);
+    // if (!(await fs.exists(dir))) {
+    //   await downloadPackage(packageName, dir);
+    // }
+    // return await loadPackageInfo(dir);
     // return await {
     //   ...loadPackageInfo(dir),
     //   installed: loadPackageInfo(path.join(pluginsdir(), packageName)),
@@ -60,11 +77,23 @@ module.exports = {
   installed_meta: 'get',
   async installed() {
     const files = await fs.readdir(pluginsdir());
-    return await Promise.all(
-      files.map((packageName) =>
-        fs.readFile(path.join(pluginsdir(), packageName, 'package.json')).then((x) => JSON.parse(x))
-      )
-    );
+    const res = [];
+    for (const packageName of files) {
+      const manifest = await fs
+        .readFile(path.join(pluginsdir(), packageName, 'package.json'))
+        .then((x) => JSON.parse(x));
+      const readmeFile = path.join(pluginsdir(), packageName, 'README.md');
+      if (await fs.exists(readmeFile)) {
+        manifest.readme = await fs.readFile(readmeFile, { encoding: 'utf-8' });
+      }
+      res.push(manifest);
+    }
+    return res;
+    // const res = await Promise.all(
+    //   files.map((packageName) =>
+    //     fs.readFile(path.join(pluginsdir(), packageName, 'package.json')).then((x) => JSON.parse(x))
+    //   )
+    // );
   },
 
   install_meta: 'post',
diff --git a/packages/web/src/plugins/manifestExtractors.js b/packages/web/src/plugins/manifestExtractors.js
index 715f2db65..32f62ef65 100644
--- a/packages/web/src/plugins/manifestExtractors.js
+++ b/packages/web/src/plugins/manifestExtractors.js
@@ -2,7 +2,8 @@ import _ from 'lodash';
 
 export function extractPluginIcon(packageManifest) {
   const { links } = packageManifest || {};
-  const { repository, homepage } = links || {};
+  const { repository } = links || {};
+  const homepage = (links && links.homepage) || packageManifest.homepage;
   const tested = repository || homepage || packageManifest.homepage;
 
   if (tested) {
diff --git a/packages/web/src/tabs/PluginTab.js b/packages/web/src/tabs/PluginTab.js
index 27698f72f..24d2cbbf5 100644
--- a/packages/web/src/tabs/PluginTab.js
+++ b/packages/web/src/tabs/PluginTab.js
@@ -55,7 +55,7 @@ function Delimiter() {
   return <span> | </span>;
 }
 
-export default function PluginTab({ packageName }) {
+function PluginTabCore({ packageName }) {
   const theme = useTheme();
   const installed = useInstalledPlugins();
   const info = useFetch({
@@ -63,7 +63,7 @@ export default function PluginTab({ packageName }) {
     url: 'plugins/info',
     defaultValue: null,
   });
-  const { readme, manifest } = info || {};
+  let { readme, manifest } = info || {};
   const handleInstall = async () => {
     axios.post('plugins/install', { packageName });
   };
@@ -71,34 +71,52 @@ export default function PluginTab({ packageName }) {
     axios.post('plugins/uninstall', { packageName });
   };
 
+  if (info == null) {
+    return <LoadingInfo message="Loading extension detail" />;
+  }
+
+  if (manifest == null) {
+    const installedFound = installed.find((x) => x.name == packageName);
+    if (installedFound) {
+      manifest = installedFound;
+      readme = installedFound.readme;
+    }
+    if (manifest == null) {
+      return null;
+    }
+  }
+
+  return (
+    <>
+      <Header theme={theme}>
+        <Icon src={extractPluginIcon(manifest)} />
+        <HeaderBody>
+          <Title theme={theme}>{packageName}</Title>
+          <HeaderLine>
+            <Author>{extractPluginAuthor(manifest)}</Author>
+            <Delimiter />
+            <Version>{manifest.version && manifest.version}</Version>
+          </HeaderLine>
+          <HeaderLine>
+            {!installed.find((x) => x.name == packageName) && (
+              <FormStyledButton type="button" value="Install" onClick={handleInstall} />
+            )}
+            {!!installed.find((x) => x.name == packageName) && (
+              <FormStyledButton type="button" value="Uninstall" onClick={handleUninstall} />
+            )}
+          </HeaderLine>
+        </HeaderBody>
+      </Header>
+      <ReactMarkdown>{readme}</ReactMarkdown>
+    </>
+  );
+}
+
+export default function PluginTab({ packageName }) {
+  const theme = useTheme();
   return (
     <WhitePage theme={theme}>
-      {info == null || manifest == null ? (
-        <LoadingInfo message="Loading extension detail" />
-      ) : (
-        <>
-          <Header theme={theme}>
-            <Icon src={extractPluginIcon(manifest)} />
-            <HeaderBody>
-              <Title theme={theme}>{packageName}</Title>
-              <HeaderLine>
-                <Author>{extractPluginAuthor(manifest)}</Author>
-                <Delimiter />
-                <Version>{manifest.version && manifest.version}</Version>
-              </HeaderLine>
-              <HeaderLine>
-                {!installed.find((x) => x.name == packageName) && (
-                  <FormStyledButton type="button" value="Install" onClick={handleInstall} />
-                )}
-                {!!installed.find((x) => x.name == packageName) && (
-                  <FormStyledButton type="button" value="Uninstall" onClick={handleUninstall} />
-                )}
-              </HeaderLine>
-            </HeaderBody>
-          </Header>
-          <ReactMarkdown>{readme}</ReactMarkdown>
-        </>
-      )}
+      <PluginTabCore packageName={packageName} />
     </WhitePage>
   );
 }