diff --git a/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/javascript.md b/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/javascript.md
index ebbf7731e52a..e2c2455fef54 100644
--- a/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/javascript.md
+++ b/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/javascript.md
@@ -15,7 +15,7 @@ Example applications for a variety of JavaScript frameworks such as React, Vue a
 ### NPM
 
 ```bash
-npm i flagsmith --save
+npm i @flagsmith/flagsmith --save
 ```
 
 ### NPM for React Native
@@ -29,7 +29,7 @@ AsyncStorage to be provided (e.g. @react-native-community/async-storage) in orde
 :::
 
 ```bash
-npm i react-native-flagsmith --save
+npm i @flagsmith/react-native --save
 ```
 
 ## Basic Usage
@@ -41,7 +41,7 @@ settings page.
 ### Example: Initialising the SDK
 
 ```javascript
-import flagsmith from 'flagsmith or react-native-flagsmith'; //Add this line if you're using flagsmith via npm
+import flagsmith from '@flagsmith/flagsmith or @flagsmith/react-native'; //Add this line if you're using flagsmith via npm
 
 flagsmith.init({
  environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
@@ -82,7 +82,7 @@ You can define default flag values when initialising the SDK. This ensures that
 the event that it [cannot receive a response from our API](/best-practices/defensive-coding).
 
 ```javascript
-import flagsmith from 'flagsmith or react-native-flagsmith'; //Add this line if you're using flagsmith via npm
+import flagsmith from '@flagsmith/flagsmith or @flagsmith/react-native'; //Add this line if you're using flagsmith via npm
 
 try {
     flagsmith.init({
@@ -136,7 +136,7 @@ When you initialise the client without an identity, it will fetch the flags for
 `preventFetch:true`).
 
 ```javascript
-import flagsmith from 'flagsmith';
+import flagsmith from '@flagsmith/flagsmith';
 
 flagsmith.init({
  environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
@@ -170,7 +170,7 @@ flagsmith.init({
 });
 
 /*
-Can be called either after you're done initialising the project or in flagsmith.init with its identity and trait properties 
+Can be called either after you're done initialising the project or in flagsmith.init with its identity and trait properties
 to prevent flags being fetched twice.
 */
 flagsmith.identify('flagsmith_sample_user'); //This will create a user in the dashboard if they don't already exist
@@ -182,7 +182,7 @@ Initialising the client with an identity property will retrieve the user's flags
 You can also specify traits at this point which could determine the flags that come back based on segment overrides.
 
 ```javascript
-import flagsmith from 'flagsmith';
+import flagsmith from '@flagsmith/flagsmith';
 
 flagsmith.init({
  environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
@@ -279,7 +279,7 @@ export function createFlagsmithInstance (): IFlagsmith
 Usage:
 
 ```javascript
-import { createFlagsmithInstance } from 'flagsmith';
+import { createFlagsmithInstance } from '@flagsmith/flagsmith';
 const flagsmith = createFlagsmithInstance();
 const flagsmithB = createFlagsmithInstance();
 
@@ -340,7 +340,7 @@ We can now enforce these types:
 
 ```typescript
 // enforces you passing the correct key to flagsmith.getValue(flag:FlagOptions), flagsmith.getTrait(trait:TraitOptions)
-import flagsmith from 'flagsmith';
+import flagsmith from '@flagsmith/flagsmith';
 const typedFlagsmith = flagsmith as IFlagsmith<FlagOptions, TraitOptions>;
 
 // Similarly for the useFlagsmith hook is typed with useFlagsmith(flags:FlagOptions[],traits:TraitOptions[])
diff --git a/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/nextjs-and-ssr.md b/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/nextjs-and-ssr.md
index b096cfeb8e02..90eb99183e9f 100644
--- a/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/nextjs-and-ssr.md
+++ b/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/nextjs-and-ssr.md
@@ -23,7 +23,7 @@ An example application for Next.js middleware can be found
 ### NPM
 
 ```bash
-npm i flagsmith --save
+npm i @flagsmith/flagsmith --save
 ```
 
 ## Basic Usage
@@ -34,7 +34,7 @@ settings page.
 ## Comparing SSR and client-side Flagsmith usage
 
 The SDK is initialised and used in the same way as the [JavaScript](/integrating-with-flagsmith/sdks/client-side-sdks/javascript) and [React](/integrating-with-flagsmith/sdks/client-side-sdks/react)
-SDK. The main difference is that Flagsmith should be imported from `flagsmith/isomorphic`.
+SDK. The main difference is that Flagsmith should be imported from `@flagsmith/flagsmith/isomorphic`.
 
 The main flow with Next.js and any JavaScript-based SSR can be as follows:
 
@@ -56,9 +56,9 @@ state. Below is an example for the **app** router as well as the **pages** route
 
 import { ReactNode, useRef } from "react";
 
-import { FlagsmithProvider } from "flagsmith/react";
-import { IState } from "flagsmith/types";
-import { createFlagsmithInstance } from "flagsmith/isomorphic";
+import { FlagsmithProvider } from "@flagsmith/flagsmith/react";
+import { IState } from "@flagsmith/flagsmith/types";
+import { createFlagsmithInstance } from "@flagsmith/flagsmith/isomorphic";
 
 export const FeatureFlagProvider = ({
   serverState,
@@ -79,7 +79,7 @@ export const FeatureFlagProvider = ({
 // src/app/layout.jsx
 import { ReactNode } from "react";
 import { FeatureFlagProvider } from './components/FeatureFlagProvider';
-import flagsmith from "flagsmith/isomorphic";
+import flagsmith from "@flagsmith/flagsmith/isomorphic";
 
 export default async function RootLayout({
   children,
@@ -111,8 +111,8 @@ export default async function RootLayout({
 
 ```javascript
 // src/pages/_app.jsx
-import { FlagsmithProvider } from 'flagsmith/react';
-import { createFlagsmithInstance } from 'flagsmith/isomorphic';
+import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
+import { createFlagsmithInstance } from '@flagsmith/flagsmith/isomorphic';
 function MyApp({ Component, pageProps, flagsmithState }) {
  const flagsmithRef = useRef(createFlagsmithInstance());
  return (
@@ -140,7 +140,7 @@ export default MyApp;
 ```javascript
 'use client'; // Only required by the app router version.
 
-import { useFlags } from 'flagsmith/react';
+import { useFlags } from '@flagsmith/flagsmith/react';
 
 export function MyComponent() {
  const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
@@ -157,14 +157,14 @@ From this point on, the SDK usage is the same as the [React SDK Guide](/integrat
 
 ### Example: Flagsmith with Next.js middleware
 
-The Flagsmith JS client includes `flagsmith/next-middleware`, it can be used just like the regular library within
+The Flagsmith JS client includes `@flagsmith/flagsmith/next-middleware`, it can be used just like the regular library within
 Next.js middleware.
 
 ```javascript
 // middleware.ts
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
-import flagsmith from 'flagsmith/next-middleware';
+import flagsmith from '@flagsmith/flagsmith/next-middleware';
 
 export async function middleware(request: NextRequest) {
  const identity = request.cookies.get('user');
diff --git a/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/react.md b/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/react.md
index 10a73d0e7139..f08c3b8449d4 100644
--- a/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/react.md
+++ b/docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/react.md
@@ -18,7 +18,7 @@ Example applications for a variety of React, React Native and Next.js can be fou
 ### NPM
 
 ```bash
-npm i flagsmith --save
+npm i @flagsmith/flagsmith --save
 ```
 
 ### NPM for React Native
@@ -32,7 +32,7 @@ AsyncStorage to be provided (e.g. @react-native-community/async-storage) in orde
 :::
 
 ```bash
-npm i react-native-flagsmith --save
+npm i @flagsmith/react-native --save
 ```
 
 ## Basic Usage
@@ -46,8 +46,8 @@ Wrapping your application with our FlagsmithProvider component provides a React
 that you can use the hooks `useFlagsmith` and `useFlags`.
 
 ```javascript
-import flagsmith from 'flagsmith'
-import {FlagsmithProvider} from 'flagsmith/react'
+import flagsmith from '@flagsmith/flagsmith'
+import {FlagsmithProvider} from '@flagsmith/flagsmith/react'
 
 export function AppRoot() {
   <FlagsmithProvider options={{
@@ -75,7 +75,7 @@ Components that have been wrapped in a FlagsmithProvider will be able to evaluat
 well as user traits via the `useFlags` hook.
 
 ```javascript
-import { useFlags } from 'flagsmith/react';
+import { useFlags } from '@flagsmith/flagsmith/react';
 
 export function MyComponent() {
  const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
@@ -112,7 +112,7 @@ Components that have been wrapped in a FlagsmithProvider will be able to access
 
 ```javascript
 import React from 'react';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export function MyComponent() {
  const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
diff --git a/frontend/.claude/context/feature-flags/feature-flags.md b/frontend/.claude/context/feature-flags/feature-flags.md
index ec7c5030d92a..991541866e19 100644
--- a/frontend/.claude/context/feature-flags/feature-flags.md
+++ b/frontend/.claude/context/feature-flags/feature-flags.md
@@ -71,7 +71,7 @@ class MyClassComponent extends Component {
 For reference, the project also supports direct `useFlags` hook, but **Utils.getFlagsmithHasFeature is preferred**:
 
 ```typescript
-import { useFlags } from 'flagsmith/react'
+import { useFlags } from '@flagsmith/flagsmith/react'
 
 const MyComponent = () => {
   const flags = useFlags(['feature_name'])
diff --git a/frontend/.claude/context/ui-patterns.md b/frontend/.claude/context/ui-patterns.md
index 13b8d70c575a..b09123037321 100644
--- a/frontend/.claude/context/ui-patterns.md
+++ b/frontend/.claude/context/ui-patterns.md
@@ -98,7 +98,7 @@ const MyPage = () => {
 When specifically requested, this pattern shows tabs only when feature flag is enabled:
 
 ```typescript
-import { useFlags } from 'flagsmith/react'
+import { useFlags } from '@flagsmith/flagsmith/react'
 import { Tabs } from 'components/base/forms/Tabs'
 import Utils from 'common/utils/utils'
 const MyPage = () => {
diff --git a/frontend/common/code-help/create-user/create-user-next.js b/frontend/common/code-help/create-user/create-user-next.js
index 68cb4585b42b..6f8231946098 100644
--- a/frontend/common/code-help/create-user/create-user-next.js
+++ b/frontend/common/code-help/create-user/create-user-next.js
@@ -7,7 +7,7 @@ module.exports = (
 // Option 1: Identify clientside
 //Home Page
 import flagsmith from '${LIB_NAME}/isomorphic';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
diff --git a/frontend/common/code-help/init/init-next-app-router.js b/frontend/common/code-help/init/init-next-app-router.js
index abbfe320c626..6f6fe818cda2 100644
--- a/frontend/common/code-help/init/init-next-app-router.js
+++ b/frontend/common/code-help/init/init-next-app-router.js
@@ -38,9 +38,9 @@ export default async function RootLayout({
 "use client";
 
 import { ReactNode, useRef } from "react";
-import { FlagsmithProvider } from "flagsmith/react";
-import { IState } from "flagsmith/types";
-import { createFlagsmithInstance } from "flagsmith/isomorphic";
+import { FlagsmithProvider } from "@flagsmith/flagsmith/react";
+import { IState } from "@flagsmith/flagsmith/types";
+import { createFlagsmithInstance } from "@flagsmith/flagsmith/isomorphic";
 
 export const FeatureFlagProvider = ({
   serverState,
@@ -61,7 +61,7 @@ export const FeatureFlagProvider = ({
 // app/page.tsx
 "use client";
 
-import { useFlags } from 'flagsmith/react';
+import { useFlags } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
diff --git a/frontend/common/code-help/init/init-next-pages-router.js b/frontend/common/code-help/init/init-next-pages-router.js
index 5c42a0ab3806..c9056916522b 100644
--- a/frontend/common/code-help/init/init-next-pages-router.js
+++ b/frontend/common/code-help/init/init-next-pages-router.js
@@ -4,7 +4,7 @@ module.exports = (
   { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
 ) => `// pages/_app.js
 import ${LIB_NAME} from "${NPM_CLIENT}/isomorphic";
-import { FlagsmithProvider } from 'flagsmith/react';
+import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
 
 export default function App({ Component, pageProps, flagsmithState } {
   return (
@@ -35,8 +35,8 @@ App.getInitialProps = async () => {
 }
 
 // pages/index.js
-import flagsmith from 'flagsmith/isomorphic';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import flagsmith from '@flagsmith/flagsmith/isomorphic';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
diff --git a/frontend/common/code-help/init/init-react.js b/frontend/common/code-help/init/init-react.js
index 4b9a7e3d9527..1ed44410505b 100644
--- a/frontend/common/code-help/init/init-react.js
+++ b/frontend/common/code-help/init/init-react.js
@@ -5,7 +5,7 @@ module.exports = (
   { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
 ) => `// App root
 import ${LIB_NAME} from "${NPM_CLIENT}";
-import { FlagsmithProvider } from 'flagsmith/react';
+import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
 
 export default function App() {
   return (
diff --git a/frontend/common/code-help/traits/traits-next.js b/frontend/common/code-help/traits/traits-next.js
index e6e8db85ec9a..3a94469b3296 100644
--- a/frontend/common/code-help/traits/traits-next.js
+++ b/frontend/common/code-help/traits/traits-next.js
@@ -7,7 +7,7 @@ module.exports = (
 // Option 1: Identify clientside
 //Home Page
 import flagsmith from '${LIB_NAME}/isomorphic';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
diff --git a/frontend/common/constants.ts b/frontend/common/constants.ts
index 8b6e98a1d798..ba85c84c88f5 100644
--- a/frontend/common/constants.ts
+++ b/frontend/common/constants.ts
@@ -11,7 +11,7 @@ const keywords = {
   FEATURE_NAME_ALT_VALUE: 'big',
   LIB_NAME: 'flagsmith',
   LIB_NAME_JAVA: 'FlagsmithClient',
-  NPM_CLIENT: 'flagsmith',
+  NPM_CLIENT: '@flagsmith/flagsmith',
   NPM_NODE_CLIENT: 'flagsmith-nodejs',
   SEGMENT_NAME: 'superUsers',
   TRAIT_NAME: 'age',
@@ -21,7 +21,7 @@ const keywords = {
 }
 const keywordsReactNative = {
   ...keywords,
-  NPM_CLIENT: 'react-native-flagsmith',
+  NPM_CLIENT: '@flagsmith/react-native',
 }
 const Constants = {
   archivedTag: { color: '#8f8f8f', label: 'Archived' },
diff --git a/frontend/e2e/global-setup.playwright.ts b/frontend/e2e/global-setup.playwright.ts
index a2594731fbbe..ef95fd40ddb5 100644
--- a/frontend/e2e/global-setup.playwright.ts
+++ b/frontend/e2e/global-setup.playwright.ts
@@ -1,6 +1,6 @@
 import { FullConfig } from '@playwright/test';
 import fetch from 'node-fetch';
-import flagsmith from 'flagsmith/isomorphic';
+import flagsmith from '@flagsmith/flagsmith/isomorphic';
 import Project from '../common/project';
 import * as fs from 'fs';
 import * as path from 'path';
diff --git a/frontend/e2e/helpers/utils.playwright.ts b/frontend/e2e/helpers/utils.playwright.ts
index 60feefff1358..2322496d4da1 100644
--- a/frontend/e2e/helpers/utils.playwright.ts
+++ b/frontend/e2e/helpers/utils.playwright.ts
@@ -1,6 +1,6 @@
 import fetch from 'node-fetch';
-import flagsmith from 'flagsmith/isomorphic';
-import { IFlagsmith } from 'flagsmith/types';
+import flagsmith from '@flagsmith/flagsmith/isomorphic';
+import { IFlagsmith } from '@flagsmith/flagsmith/types';
 import Project from '../../common/project';
 
 export const LONG_TIMEOUT = 20000;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0b5d23fa0b49..3fd373a5e61d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -54,7 +54,6 @@
         "fbjs": "^3.0.4",
         "fetchify": "0.0.2",
         "file-loader": "6.2.0",
-        "flagsmith": "^10.0.0",
         "flux-react-dispatcher": "1.2.5",
         "free-email-domains": "^1.2.14",
         "fs-extra": "2.0.0",
@@ -2780,9 +2779,9 @@
       }
     },
     "node_modules/@flagsmith/flagsmith": {
-      "version": "11.0.0-internal.5",
-      "resolved": "https://registry.npmjs.org/@flagsmith/flagsmith/-/flagsmith-11.0.0-internal.5.tgz",
-      "integrity": "sha512-DYvLbh+w3SboOlk2xHjCCjf+NbIkLuddo+vO3Z/vjlEE+icd6rl8JTARynap5EgXG4DHuOUCEiu4UCepRPWZLQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@flagsmith/flagsmith/-/flagsmith-11.0.0.tgz",
+      "integrity": "sha512-jJB+1O/ctU7TCoIBsV2lgYAUOpShjcSqHkH4nlyqUGeQCGC0ZHto8IvGf+nZwpFAF5Czaphn/anm9MDoZIS3rw==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@floating-ui/core": {
@@ -11267,12 +11266,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/flagsmith": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/flagsmith/-/flagsmith-10.0.0.tgz",
-      "integrity": "sha512-JEO4V6nO6ic4ahi5uZRVBYKFil9IuRkLWemKZuFv3QVUCxluQfgymwiuPSs4/LqwFqQ+89SuubaawHxUxUPTzg==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 75e93892c9e7..033f99b97f0d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -82,7 +82,6 @@
     "fbjs": "^3.0.4",
     "fetchify": "0.0.2",
     "file-loader": "6.2.0",
-    "flagsmith": "^10.0.0",
     "flux-react-dispatcher": "1.2.5",
     "free-email-domains": "^1.2.14",
     "fs-extra": "2.0.0",