diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx
index 6d60467..60f6853 100644
--- a/src/pages/rules.tsx
+++ b/src/pages/rules.tsx
@@ -1,14 +1,28 @@
 import { useState } from "react";
-import { invoke } from "@tauri-apps/api";
-import { Box, Button, Grid, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Grid,
+  Slide,
+  Snackbar,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { importProfile } from "../services/command";
 
 const RulesPage = () => {
   const [url, setUrl] = useState("");
+  const [message, setMessage] = useState("");
+  const [disabled, setDisabled] = useState(false);
 
-  const onClick = async () => {
+  const onClick = () => {
     if (!url) return;
-    const data = await invoke("cmd_import_profile", { url });
-    console.log(data);
+    setUrl("");
+    setDisabled(true);
+    importProfile(url)
+      .then(() => setMessage("Successfully import profile."))
+      .catch(() => setMessage("Failed to import profile."))
+      .finally(() => setDisabled(false));
   };
 
   return (
@@ -26,17 +40,32 @@ const RulesPage = () => {
         <Grid item xs={9}>
           <TextField
             label="Profile Url"
+            size="medium"
             fullWidth
             value={url}
             onChange={(e) => setUrl(e.target.value)}
           />
         </Grid>
         <Grid item>
-          <Button size="large" variant="contained" onClick={onClick}>
-            View
+          <Button
+            disabled={disabled}
+            size="large"
+            variant="contained"
+            onClick={onClick}
+          >
+            Import
           </Button>
         </Grid>
       </Grid>
+
+      <Snackbar
+        open={!!message}
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        autoHideDuration={3000}
+        onClose={() => setMessage("")}
+        message={message}
+        TransitionComponent={(p) => <Slide {...p} direction="left" />}
+      />
     </Box>
   );
 };