diff --git a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/BirthdaysPerMonthWebPart.ts b/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/BirthdaysPerMonthWebPart.ts
index 2b893c8eb..68b283233 100644
--- a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/BirthdaysPerMonthWebPart.ts
+++ b/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/BirthdaysPerMonthWebPart.ts
@@ -1,61 +1,50 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
-import { Version } from '@microsoft/sp-core-library';
+import * as React from "react";
+import * as ReactDom from "react-dom";
+import { Version } from "@microsoft/sp-core-library";
 import {
   IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-property-pane';
-import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+  PropertyPaneTextField,
+} from "@microsoft/sp-property-pane";
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
 
-import * as strings from 'BirthdaysPerMonthWebPartStrings';
-import BirthdaysPerMonth from './components/BirthdaysPerMonth';
-import { IBirthdaysPerMonthProps } from './components/IBirthdaysPerMonthProps';
-import '../../../assets/dist/tailwind.css';
+import * as strings from "BirthdaysPerMonthWebPartStrings";
+import "../../../assets/dist/tailwind.css";
+import {
+  BirthdaysPerMonth,
+  IBirthdaysPerMonthProps,
+} from "./components/BirthdaysPerMonth";
 
 export interface IBirthdaysPerMonthWebPartProps {
   description: string;
 }
 
 export default class BirthdaysPerMonthWebPart extends BaseClientSideWebPart<IBirthdaysPerMonthWebPartProps> {
-
   private _isDarkTheme: boolean = false;
-  private _environmentMessage: string = '';
+  private _environmentMessage: string = "";
 
   public render(): void {
-    const element: React.ReactElement<IBirthdaysPerMonthProps> = React.createElement(
-      BirthdaysPerMonth,
-      {
+    const element: React.ReactElement<IBirthdaysPerMonthProps> =
+      React.createElement(BirthdaysPerMonth, {
         description: this.properties.description,
         isDarkTheme: this._isDarkTheme,
         environmentMessage: this._environmentMessage,
         hasTeamsContext: !!this.context.sdks.microsoftTeams,
-        userDisplayName: this.context.pageContext.user.displayName
-      }
-    );
+        userDisplayName: this.context.pageContext.user.displayName,
+      });
 
     ReactDom.render(element, this.domElement);
   }
 
   protected onInit(): Promise<void> {
-    this._environmentMessage = this._getEnvironmentMessage();
-
     return super.onInit();
   }
 
-  private _getEnvironmentMessage(): string {
-    if (!!this.context.sdks.microsoftTeams) { // running in Teams
-      return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
-    }
-
-    return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
-  }
-
   protected onDispose(): void {
     ReactDom.unmountComponentAtNode(this.domElement);
   }
 
   protected get dataVersion(): Version {
-    return Version.parse('1.0');
+    return Version.parse("1.0");
   }
 
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
@@ -63,20 +52,20 @@ export default class BirthdaysPerMonthWebPart extends BaseClientSideWebPart<IBir
       pages: [
         {
           header: {
-            description: strings.PropertyPaneDescription
+            description: strings.PropertyPaneDescription,
           },
           groups: [
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('description', {
-                  label: strings.DescriptionFieldLabel
-                })
-              ]
-            }
-          ]
-        }
-      ]
+                PropertyPaneTextField("description", {
+                  label: strings.DescriptionFieldLabel,
+                }),
+              ],
+            },
+          ],
+        },
+      ],
     };
   }
 }
diff --git a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.module.scss b/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.module.scss
deleted file mode 100644
index 31797c313..000000000
--- a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
-
-.birthdaysPerMonth {
-  overflow: hidden;
-  padding: 1em;
-  color: "[theme:bodyText, default: #323130]";
-  color: var(--bodyText);
-  &.teams {
-    font-family: $ms-font-family-fallbacks;
-  }
-}
-
-.welcome {
-  text-align: center;
-}
-
-.welcomeImage {
-  width: 100%;
-  max-width: 420px;
-}
-
-.links {
-  a {
-    text-decoration: none;
-    color: "[theme:link, default:#03787c]";
-    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
-
-    &:hover {
-      text-decoration: underline;
-      color: "[theme:linkHovered, default: #014446]";
-      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
-    }
-  }
-}
\ No newline at end of file
diff --git a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.tsx b/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.tsx
index 5908550da..e330d8f4b 100644
--- a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.tsx
+++ b/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/BirthdaysPerMonth.tsx
@@ -1,43 +1,89 @@
-import * as React from 'react';
-import styles from './BirthdaysPerMonth.module.scss';
-import { IBirthdaysPerMonthProps } from './IBirthdaysPerMonthProps';
-import { escape } from '@microsoft/sp-lodash-subset';
+import * as React from "react";
+import styles from "./BirthdaysPerMonth.module.scss";
+import { escape } from "@microsoft/sp-lodash-subset";
 
-export default class BirthdaysPerMonth extends React.Component<IBirthdaysPerMonthProps, {}> {
-  public render(): React.ReactElement<IBirthdaysPerMonthProps> {
-    const {
-      description,
-      isDarkTheme,
-      environmentMessage,
-      hasTeamsContext,
-      userDisplayName
-    } = this.props;
+interface IBirthdaysPerMonthProps {}
 
-    return (
-      <section className={`tw-text-red-700`}>
-        <div className={styles.welcome}>
-          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
-          <h2>Well done, {escape(userDisplayName)}!</h2>
-          <div>{environmentMessage}</div>
-          <div>Web part property value: <strong>{escape(description)}</strong></div>
-        </div>
-        <div>
-          <h3>Welcome to SharePoint Framework!</h3>
-          <p>
-            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
-          </p>
-          <h4>Learn more about SPFx development:</h4>
-          <ul className={styles.links}>
-            <li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
-            <li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
-          </ul>
-        </div>
-      </section>
-    );
-  }
-}
+const BirthdaysPerMonth = () => {
+  return (
+    <section className={`tw-text-red-700`}>
+      <div className={styles.welcome}>
+        <img
+          alt=""
+          src={require("../assets/welcome-light.png")}
+          className={styles.welcomeImage}
+        />
+        <h2>Well done, Ari!</h2>
+      </div>
+      <div>
+        <h3>Welcome to SharePoint Framework!</h3>
+        <p>
+          The SharePoint Framework (SPFx) is a extensibility model for Microsoft
+          Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to
+          extend Microsoft 365 with automatic Single Sign On, automatic hosting
+          and industry standard tooling.
+        </p>
+        <h4>Learn more about SPFx development:</h4>
+        <ul className={styles.links}>
+          <li>
+            <a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">
+              SharePoint Framework Overview
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://aka.ms/spfx-yeoman-graph"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Use Microsoft Graph in your solution
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://aka.ms/spfx-yeoman-teams"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Build for Microsoft Teams using SharePoint Framework
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://aka.ms/spfx-yeoman-viva"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Build for Microsoft Viva Connections using SharePoint Framework
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://aka.ms/spfx-yeoman-store"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Publish SharePoint Framework applications to the marketplace
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://aka.ms/spfx-yeoman-api"
+              target="_blank"
+              rel="noreferrer"
+            >
+              SharePoint Framework API reference
+            </a>
+          </li>
+          <li>
+            <a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">
+              Microsoft 365 Developer Community
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+};
+
+export { IBirthdaysPerMonthProps, BirthdaysPerMonth };
diff --git a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/IBirthdaysPerMonthProps.ts b/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/IBirthdaysPerMonthProps.ts
deleted file mode 100644
index 7945a78cc..000000000
--- a/samples/react-birthdays-per-month/src/webparts/birthdaysPerMonth/components/IBirthdaysPerMonthProps.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface IBirthdaysPerMonthProps {
-  description: string;
-  isDarkTheme: boolean;
-  environmentMessage: string;
-  hasTeamsContext: boolean;
-  userDisplayName: string;
-}