diff --git a/.changeset/perfect-mayflies-greet.md b/.changeset/perfect-mayflies-greet.md
new file mode 100644
index 0000000000..7e57507dae
--- /dev/null
+++ b/.changeset/perfect-mayflies-greet.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Updated frontend plugin template to use some more recent features
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
index 159fcd70c5..03b25dfb4f 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
@@ -1,7 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Table, TableColumn, Progress } from '@backstage/core-components';
-import Alert from '@material-ui/lab/Alert';
+import { Table, TableColumn, Progress, ResponseErrorPanel } from '@backstage/core-components';
+import { fetchApiRef, useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles({
@@ -74,6 +74,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
 };
 
 export const ExampleFetchComponent = () => {
+  const { fetch } = useApi(fetchApiRef);
   const { value, loading, error } = useAsync(async (): Promise<User[]> => {
     const response = await fetch('https://randomuser.me/api/?results=20');
     const data = await response.json();
@@ -83,7 +84,7 @@ export const ExampleFetchComponent = () => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return <DenseTable users={value || []} />;