diff --git a/.changeset/rotten-birds-build.md b/.changeset/rotten-birds-build.md
index dba7504450..3a1de3768a 100644
--- a/.changeset/rotten-birds-build.md
+++ b/.changeset/rotten-birds-build.md
@@ -1,6 +1,6 @@
 ---
-'@backstage/plugin-microsoft-calendar': patch
+'@backstage/plugin-microsoft-calendar': minor
 ---
 
-created new plugin @backstage/plugin-microsoft-calendar and added it to plugins directory
-updated example-app homepage to show microsoft-calendar widget.
+Created a new Frontend plugin @backstage/plugin-microsoft-calendar and added it to plugins directory.
+please refer to readme (readme.md)[./../plugins/microsoft-calendar/README.md] for step wise instruction to setup the plugin in your backstage frontend app.
diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx
index b0491df93f..29023738af 100644
--- a/packages/app/src/components/home/HomePage.tsx
+++ b/packages/app/src/components/home/HomePage.tsx
@@ -27,7 +27,7 @@ import {
 import { Content, Header, Page } from '@backstage/core-components';
 import { HomePageSearchBar } from '@backstage/plugin-search';
 import { HomePageCalendar } from '@backstage/plugin-gcalendar';
-import { MicrosoftCalendar } from '@backstage/plugin-microsoft-calendar';
+import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
 
@@ -116,7 +116,7 @@ export const homePage = (
           <HomePageCalendar />
         </Grid>
         <Grid item xs={12} md={4}>
-          <MicrosoftCalendar />
+          <MicrosoftCalendarCard />
         </Grid>
         <Grid item xs={12} md={4}>
           <HomePageStarredEntities />
diff --git a/plugins/microsoft-calendar/api-report.md b/plugins/microsoft-calendar/api-report.md
index 38187b39b2..a68b070c32 100644
--- a/plugins/microsoft-calendar/api-report.md
+++ b/plugins/microsoft-calendar/api-report.md
@@ -11,9 +11,6 @@ import { Event as Event_2 } from '@microsoft/microsoft-graph-types';
 import { FetchApi } from '@backstage/core-plugin-api';
 import { OAuthApi } from '@backstage/core-plugin-api';
 
-// @public (undocumented)
-export const MicrosoftCalendar: () => JSX.Element;
-
 // @public (undocumented)
 export class MicrosoftCalendarApiClient {
   constructor(options: { authApi: OAuthApi; fetchApi: FetchApi });
@@ -35,5 +32,8 @@ export class MicrosoftCalendarApiClient {
 // @public (undocumented)
 export const microsoftCalendarApiRef: ApiRef<MicrosoftCalendarApiClient>;
 
+// @public (undocumented)
+export const MicrosoftCalendarCard: () => JSX.Element;
+
 // (No @packageDocumentation comment for this package)
 ```
diff --git a/plugins/microsoft-calendar/dev/index.tsx b/plugins/microsoft-calendar/dev/index.tsx
index f2189ba3bc..d611bca20c 100644
--- a/plugins/microsoft-calendar/dev/index.tsx
+++ b/plugins/microsoft-calendar/dev/index.tsx
@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { microsoftCalendarPlugin, MicrosoftCalendar } from '../src/plugin';
+import { microsoftCalendarPlugin, MicrosoftCalendarCard } from '../src/plugin';
 import { microsoftCalendarApiRef } from '../src';
 import responseMock from './mock.json';
 import { microsoftAuthApiRef } from '@backstage/core-plugin-api';
@@ -52,7 +52,7 @@ createDevApp()
       <Page themeId="home">
         <Content>
           <Grid item xs={12} md={6}>
-            <MicrosoftCalendar />
+            <MicrosoftCalendarCard />
           </Grid>
         </Content>
       </Page>
diff --git a/plugins/microsoft-calendar/src/components/CalendarCard.tsx b/plugins/microsoft-calendar/src/components/CalendarCard.tsx
index dba12bdea5..dd94bad148 100644
--- a/plugins/microsoft-calendar/src/components/CalendarCard.tsx
+++ b/plugins/microsoft-calendar/src/components/CalendarCard.tsx
@@ -131,11 +131,7 @@ export const CalendarCard = () => {
               </Box>
             )}
             {sortBy(events, [getStartDate]).map(event => (
-              <CalendarEvent
-                key={`${event.id}`}
-                event={event}
-                // calendar={calendars}
-              />
+              <CalendarEvent key={`${event.id}`} event={event} />
             ))}
           </Box>
         )}
diff --git a/plugins/microsoft-calendar/src/components/CalendarEvent.tsx b/plugins/microsoft-calendar/src/components/CalendarEvent.tsx
index e6e5bf03fa..e56e25a09b 100644
--- a/plugins/microsoft-calendar/src/components/CalendarEvent.tsx
+++ b/plugins/microsoft-calendar/src/components/CalendarEvent.tsx
@@ -71,11 +71,11 @@ const useStyles = makeStyles(
         backgroundColor: theme.palette.grey[100],
       },
     },
-    calendarColor: () => ({
+    calendarColor: {
       width: 8,
       borderTopLeftRadius: 4,
       borderBottomLeftRadius: 4,
-    }),
+    },
   }),
   {
     name: 'MicrosoftCalendarEvent',
@@ -83,7 +83,7 @@ const useStyles = makeStyles(
 );
 
 export const CalendarEvent = ({ event }: { event: MicrosoftCalendarEvent }) => {
-  const classes = useStyles({ event });
+  const classes = useStyles();
   const popoverState = usePopupState({
     variant: 'popover',
     popupId: event.id,
diff --git a/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx b/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx
index 60def9b6e3..601474aaa3 100644
--- a/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx
+++ b/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx
@@ -33,21 +33,19 @@ import { MicrosoftCalendarEvent } from '../api';
 import { getTimePeriod, getOnlineMeetingLink } from './util';
 
 const useStyles = makeStyles(
-  theme => {
-    return {
-      description: {
-        wordBreak: 'break-word',
-        '& a': {
-          color: theme.palette.primary.main,
-          fontWeight: 500,
-        },
+  theme => ({
+    description: {
+      wordBreak: 'break-word',
+      '& a': {
+        color: theme.palette.primary.main,
+        fontWeight: 500,
       },
-      divider: {
-        marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2),
-      },
-    };
-  },
+    },
+    divider: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+  }),
   {
     name: 'GCalendarEventPopoverContent',
   },
@@ -60,7 +58,7 @@ type CalendarEventPopoverProps = {
 export const CalendarEventPopoverContent = ({
   event,
 }: CalendarEventPopoverProps) => {
-  const classes = useStyles({ event });
+  const classes = useStyles();
   const onlineMeetingLink = getOnlineMeetingLink(event);
 
   return (
diff --git a/plugins/microsoft-calendar/src/index.ts b/plugins/microsoft-calendar/src/index.ts
index 5d37eb048d..6867ca31ac 100644
--- a/plugins/microsoft-calendar/src/index.ts
+++ b/plugins/microsoft-calendar/src/index.ts
@@ -13,5 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { MicrosoftCalendar } from './plugin';
+export { MicrosoftCalendarCard } from './plugin';
 export { MicrosoftCalendarApiClient, microsoftCalendarApiRef } from './api';
diff --git a/plugins/microsoft-calendar/src/plugin.ts b/plugins/microsoft-calendar/src/plugin.ts
index 6c67ef33b4..644d368d97 100644
--- a/plugins/microsoft-calendar/src/plugin.ts
+++ b/plugins/microsoft-calendar/src/plugin.ts
@@ -24,13 +24,9 @@ import {
   microsoftCalendarApiRef,
   MicrosoftCalendarApiClient,
 } from './api/index';
-import { rootRouteRef } from './routes';
 
 export const microsoftCalendarPlugin = createPlugin({
   id: 'microsoft-calendar',
-  routes: {
-    root: rootRouteRef,
-  },
   apis: [
     createApiFactory({
       api: microsoftCalendarApiRef,
@@ -43,9 +39,9 @@ export const microsoftCalendarPlugin = createPlugin({
 });
 
 /** @public */
-export const MicrosoftCalendar = microsoftCalendarPlugin.provide(
+export const MicrosoftCalendarCard = microsoftCalendarPlugin.provide(
   createComponentExtension({
-    name: 'MicrosoftCalendar',
+    name: 'MicrosoftCalendarCard',
     component: {
       lazy: () => import('./components').then(m => m.MicrosoftCalendar),
     },
diff --git a/plugins/microsoft-calendar/src/routes.ts b/plugins/microsoft-calendar/src/routes.ts
deleted file mode 100644
index c257690e24..0000000000
--- a/plugins/microsoft-calendar/src/routes.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Copyright 2023 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { createRouteRef } from '@backstage/core-plugin-api';
-
-export const rootRouteRef = createRouteRef({
-  id: 'microsoft-calendar',
-});