diff --git a/server/src/main/kotlin/ir/armor/tachidesk/Main.kt b/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
index 1e229bc..dbd71ca 100644
--- a/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
+++ b/server/src/main/kotlin/ir/armor/tachidesk/Main.kt
@@ -207,6 +207,7 @@ class Main {
 
             app.get("/api/v1/extensions/install/:apkName") { ctx ->
                 val apkName = ctx.pathParam("apkName")
+                println(apkName)
                 ctx.status(
                         downloadApk(apkName)
                 )
diff --git a/webUI/react/src/components/ExtensionCard.tsx b/webUI/react/src/components/ExtensionCard.tsx
index 0b0a03c..d8005da 100644
--- a/webUI/react/src/components/ExtensionCard.tsx
+++ b/webUI/react/src/components/ExtensionCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -36,16 +36,24 @@ interface IProps {
     extension: IExtension
 }
 
-export default function ExtensionCard({
-    extension: {
-        name, lang, versionName, iconUrl,
-    },
-}: IProps) {
+export default function ExtensionCard(props: IProps) {
+    const {
+        extension: {
+            name, lang, versionName, iconUrl, installed, apkName,
+        },
+    } = props;
+    const [installedState, setInstalledState] = useState<string>((installed ? 'installed' : 'install'));
+
     const classes = useStyles();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const bull = <span className={classes.bullet}>•</span>;
     const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
 
+    function install() {
+        setInstalledState('installing');
+        fetch(`http://127.0.0.1:4567/api/v1/extensions/install/${apkName}`).then(() => {
+            setInstalledState('installed');
+        });
+    }
+
     return (
         <Card>
             <CardContent className={classes.root}>
@@ -68,7 +76,7 @@ export default function ExtensionCard({
                     </div>
                 </div>
 
-                <Button variant="outlined">install</Button>
+                <Button variant="outlined" onClick={() => install()}>{installedState}</Button>
             </CardContent>
         </Card>
     );
diff --git a/webUI/react/src/typings.d.ts b/webUI/react/src/typings.d.ts
index dcc4045..1a21c32 100644
--- a/webUI/react/src/typings.d.ts
+++ b/webUI/react/src/typings.d.ts
@@ -3,4 +3,6 @@ interface IExtension {
     lang: string
     versionName: string
     iconUrl: string
+    installed: boolean
+    apkName: string
 }