diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index f5a45ae6e4..e2a1e612cc 100644
--- a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -11,6 +11,9 @@ const useStyles = makeStyles<Theme>(theme => ({
   pageBody: {
     padding: theme.spacing(3),
   },
+  title: {
+    padding: theme.spacing(1,0,2,0),
+  },
 }));
 
 const ExampleComponent: FC<{}> = () => {
@@ -23,7 +26,7 @@ const ExampleComponent: FC<{}> = () => {
           subtitle="Optional subtitle"
         ></Header>
         <div className={classes.pageBody}>
-          <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+          <Typography variant="h3" className={classes.title}>
             Plugin page title
           </Typography>
           <InfoCard title="Information card" maxWidth>