diff --git a/dev/index.tsx b/dev/index.tsx
index ef2c4c7..ba4ef60 100644
--- a/dev/index.tsx
+++ b/dev/index.tsx
@@ -1,9 +1,11 @@
+import { PropsWithChildren } from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
 import { setupWorker } from 'msw';
-import { PropsWithChildren } from 'react';
-import { flagsmithPlugin, FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard } from '../src';
+import { FlagsTab } from '../src/components/FlagsTab';
+import { FlagsmithOverviewCard } from '../src/components/FlagsmithOverviewCard';
+import { FlagsmithUsageCard } from '../src/components/FlagsmithUsageCard';
 import { handlers } from './mockHandlers';
 
 // Start MSW worker for API mocking
@@ -37,7 +39,6 @@ const EntityWrapper = ({ children }: PropsWithChildren<{}>) => (
 );
 
 createDevApp()
-  .registerPlugin(flagsmithPlugin)
   .addPage({
     element: (
       <EntityWrapper>
diff --git a/package.json b/package.json
index 1434174..5a5a587 100644
--- a/package.json
+++ b/package.json
@@ -33,9 +33,14 @@
       "backstage-cli package lint --fix"
     ]
   },
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
   "dependencies": {
     "@backstage/core-components": "^0.18.2",
     "@backstage/core-plugin-api": "^1.11.1",
+    "@backstage/frontend-plugin-api": "^0.13.2",
     "@backstage/plugin-catalog-react": "^1.13.3",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
diff --git a/src/index.ts b/src/index.ts
index 10b0056..8b080d8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,66 @@
-// Frontend plugin exports
-export { flagsmithPlugin, FlagsTab } from './plugin';
-export { FlagsmithOverviewCard } from './components/FlagsmithOverviewCard';
-export { FlagsmithUsageCard } from './components/FlagsmithUsageCard';
+import { createElement } from 'react';
+import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import {
+  EntityContentBlueprint,
+  EntityCardBlueprint,
+} from '@backstage/plugin-catalog-react/alpha';
+
+/**
+ * Entity content (tab) for FlagsTab - displays feature flags for an entity
+ * Requires annotation: flagsmith.com/project-id
+ */
+const flagsTabContent = EntityContentBlueprint.make({
+  name: 'flags',
+  params: {
+    path: '/flagsmith',
+    title: 'Feature Flags',
+    filter: 'has:annotation:flagsmith.com/project-id',
+    loader: () =>
+      import('./components/FlagsTab').then(m => createElement(m.FlagsTab)),
+  },
+});
+
+/**
+ * Entity card for FlagsmithOverviewCard - shows flag overview in entity page
+ * Requires annotation: flagsmith.com/project-id
+ */
+const overviewCard = EntityCardBlueprint.make({
+  name: 'overview',
+  params: {
+    filter: 'has:annotation:flagsmith.com/project-id',
+    loader: () =>
+      import('./components/FlagsmithOverviewCard').then(m =>
+        createElement(m.FlagsmithOverviewCard),
+      ),
+  },
+});
+
+/**
+ * Entity card for FlagsmithUsageCard - shows 30-day usage analytics
+ * Requires annotations: flagsmith.com/project-id, flagsmith.com/org-id
+ */
+const usageCard = EntityCardBlueprint.make({
+  name: 'usage',
+  params: {
+    filter: 'has:annotation:flagsmith.com/project-id,flagsmith.com/org-id',
+    loader: () =>
+      import('./components/FlagsmithUsageCard').then(m =>
+        createElement(m.FlagsmithUsageCard),
+      ),
+  },
+});
+
+/**
+ * Flagsmith plugin for Backstage's new frontend system.
+ *
+ * This plugin provides:
+ * - Entity content tab showing feature flags
+ * - Overview card for entity pages
+ * - Usage analytics card
+ */
+const flagsmithPlugin = createFrontendPlugin({
+  pluginId: 'flagsmith',
+  extensions: [flagsTabContent, overviewCard, usageCard],
+});
+
+export default flagsmithPlugin;
diff --git a/src/plugin.test.ts b/src/plugin.test.ts
deleted file mode 100644
index 9fb5b58..0000000
--- a/src/plugin.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { flagsmithPlugin } from './plugin';
-
-describe('flagsmith', () => {
-  it('should export plugin', () => {
-    expect(flagsmithPlugin).toBeDefined();
-  });
-});
diff --git a/src/plugin.ts b/src/plugin.ts
deleted file mode 100644
index b0eb4cd..0000000
--- a/src/plugin.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
-  createPlugin,
-  createComponentExtension,
-} from '@backstage/core-plugin-api';
-
-import { rootRouteRef } from './routes';
-
-export const flagsmithPlugin = createPlugin({
-  id: 'flagsmith',
-  routes: {
-    root: rootRouteRef,
-  },
-});
-
-export const FlagsTab = flagsmithPlugin.provide(
-  createComponentExtension({
-    name: 'FlagsTab',
-    component: {
-      lazy: () => import('./components/FlagsTab').then(m => m.FlagsTab),
-    },
-  }),
-);
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
deleted file mode 100644
index d31dbe2..0000000
--- a/src/routes.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createRouteRef } from '@backstage/core-plugin-api';
-
-export const rootRouteRef = createRouteRef({
-  id: 'flagsmith',
-});