diff --git a/packages/landing/package.json b/packages/landing/package.json
index b07017ce4..96933684e 100644
--- a/packages/landing/package.json
+++ b/packages/landing/package.json
@@ -62,6 +62,14 @@
       "entry": "../../node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg",
       "outfile": "dist/assets/logo-linz.svg"
     },
+    {
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/whats_new_updates.svg",
+      "outfile": "dist/assets/whats_new_updates.svg"
+    },
+    {
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/clear.svg",
+      "outfile": "dist/assets/clear.svg"
+    },
     {
       "entry": "../../node_modules/@linzjs/lui/dist/assets/fonts",
       "outfile": "dist/assets/fonts"
diff --git a/packages/landing/src/components/feature.updates.tsx b/packages/landing/src/components/feature.updates.tsx
index b7a72350d..49e3c284c 100644
--- a/packages/landing/src/components/feature.updates.tsx
+++ b/packages/landing/src/components/feature.updates.tsx
@@ -44,10 +44,10 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
   renderFeatureMedia(): ReactNode {
     const { bigImage, smallImage, iframe } = this.props;
     if (iframe) {
-      return <FeatureIFrame iframeConfig={iframe} />;
+      return this.FeatureIFrame(iframe);
     }
     if (bigImage && smallImage) {
-      return <FeatureImages bigImage={bigImage} smallImage={smallImage} />;
+      return this.FeatureImages(bigImage, smallImage);
     }
     return null; // Return null if no media is available
   }
@@ -71,11 +71,11 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
         <div className={clsx('lui-large-feature-notification', wrapperClass)}>
           <div className="lui-feature-header">
             <div className="lui-feature-title-wrapper">
-              {/* <Icon alt="whats_new_icon" name="ic_whats_new_updates" size="lg" className="lui-feature-title-icon" /> */}
+              {this.WhatsNewIcon()}
               <h1>{header}</h1>
             </div>
             <button aria-label="Close dialog" onClick={this.handleClose}>
-              {/* <Icon alt="cross_icon" name="ic_clear" status="interactive" size="md" /> */}
+              {this.ClearIcon()}
             </button>
           </div>
           {this.renderFeatureMedia()}
@@ -84,27 +84,48 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
       </ReactModal>
     );
   }
-}
 
-const FeatureImages = ({ bigImage, smallImage }: { bigImage: string; smallImage: string }): ReactNode => (
-  <div className="lui-feature-img">
-    <img className="lui-hide-xs lui-hide-sm" alt={"What's new"} src={bigImage} />
-    <img className="lui-hide-md lui-hide-lg lui-hide-xl" alt={"What's new"} src={smallImage} />
-  </div>
-);
+  WhatsNewIcon(): ReactNode {
+    return (
+      <span
+        className={'LuiIcon LuiIcon--md lui-feature-title-icon '}
+        data-icon={'ic_whats_new_updates'}
+        aria-label={'whats_new_icon'}
+      >
+        <img src="assets/whats_new_updates.svg" alt="whats_new_icon" className="LuiIcon__image" />
+      </span>
+    );
+  }
+  ClearIcon(): ReactNode {
+    return (
+      <span className="LuiIcon LuiIcon--md LuiIcon--interactive" data-icon="ic_clear" aria-label="cross_icon">
+        <img src="/assets/clear.svg" alt="cross_icon" />
+      </span>
+    );
+  }
 
-const FeatureIFrame = ({ iframeConfig }: { iframeConfig: IFrameConfig }): ReactNode => {
-  const wrapperClass = iframeConfig.iframeWrapperClass || 'iframe-wrapper';
-  const iFrameProps = iframeConfig.iFrameProps || {};
-  return (
-    <div className={wrapperClass}>
-      <iframe
-        width={iframeConfig.width}
-        height={iframeConfig.height}
-        src={iframeConfig.url}
-        title={iframeConfig.title}
-        {...iFrameProps}
-      ></iframe>
-    </div>
-  );
-};
+  FeatureImages(bigImage: string, smallImage: string): ReactNode {
+    return (
+      <div className="lui-feature-img">
+        <img className="lui-hide-xs lui-hide-sm" alt={"What's new"} src={bigImage} />
+        <img className="lui-hide-md lui-hide-lg lui-hide-xl" alt={"What's new"} src={smallImage} />
+      </div>
+    );
+  }
+
+  FeatureIFrame(iframeConfig: IFrameConfig): ReactNode {
+    const wrapperClass = iframeConfig.iframeWrapperClass || 'iframe-wrapper';
+    const iFrameProps = iframeConfig.iFrameProps || {};
+    return (
+      <div className={wrapperClass}>
+        <iframe
+          width={iframeConfig.width}
+          height={iframeConfig.height}
+          src={iframeConfig.url}
+          title={iframeConfig.title}
+          {...iFrameProps}
+        ></iframe>
+      </div>
+    );
+  }
+}
diff --git a/packages/landing/src/components/features/lg_3d_maps_splash.gif b/packages/landing/src/components/features/lg_3d_maps_splash.gif
deleted file mode 100644
index 0a0852fc7..000000000
Binary files a/packages/landing/src/components/features/lg_3d_maps_splash.gif and /dev/null differ
diff --git a/packages/landing/src/components/features/new.feature.tsx b/packages/landing/src/components/features/new.feature.tsx
deleted file mode 100644
index fa2226b67..000000000
--- a/packages/landing/src/components/features/new.feature.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { FeatureUpdates } from '../feature.updates.js';
-
-// Make sure you turn off the toggle before making any changes... someone who has not dismissed it might log in...
-const bigImage = 'https://dev.basemaps.linz.govt.nz/assets/Lg+3D+Maps+splash.gif';
-const smallImage = 'https://dev.basemaps.linz.govt.nz/assets/Lg+3D+Maps+splash.gif';
-const link = 'https://www.linz.govt.nz/products-services/data/linz-basemaps';
-
-const recentUpdates = {
-  children: (
-    <>
-      <h5 className="RecentUpdatesHeading">LINZ Basemaps 3D map is available now!</h5>
-      <p>You can now view 3d Basemaps now.</p>
-      <p>
-        For more information see&nbsp;
-        <a href={link} target="_blank" rel="noreferrer">
-          What&apos;s new in Basemaps
-        </a>
-      </p>
-    </>
-  ),
-  bigImage,
-  smallImage,
-};
-
-export const dismissedKey = `Basemaps_Recent_Updates_Dismissed`;
-export const releaseVersion = 'V7';
-/*
-  *****************   PLEASE READ BEFORE CHANGING!!!  *****************
-  Make sure you delete lines 55 to 58 and uncomment line 54 before merging your changes.
-  Those lines were only added for OCTN release.
- */
-export const NewFeature = (): JSX.Element => {
-  const resentUpdatesModalEnabled = true;
-  return (
-    <>
-      <FeatureUpdates
-        id={dismissedKey}
-        header="What's new"
-        bigImage={recentUpdates.bigImage}
-        smallImage={recentUpdates.smallImage}
-        enabled={resentUpdatesModalEnabled}
-        releaseVersion={releaseVersion}
-      >
-        {recentUpdates.children}
-      </FeatureUpdates>
-    </>
-  );
-};
diff --git a/packages/landing/src/components/features/sml_3d_map_splash.gif b/packages/landing/src/components/features/sml_3d_map_splash.gif
deleted file mode 100644
index 244d527ab..000000000
Binary files a/packages/landing/src/components/features/sml_3d_map_splash.gif and /dev/null differ
diff --git a/packages/landing/src/components/new.feature.tsx b/packages/landing/src/components/new.feature.tsx
new file mode 100644
index 000000000..49ddafe35
--- /dev/null
+++ b/packages/landing/src/components/new.feature.tsx
@@ -0,0 +1,48 @@
+import { Component, ReactNode } from 'react';
+
+import { Config } from '../config.js';
+import { WindowUrl } from '../url.js';
+import { FeatureUpdates } from './feature.updates.js';
+
+const baseUrl = WindowUrl.baseUrl();
+
+/**
+ * Please updated the following settings and descriptions for new features pop up
+ */
+const bigImage = new URL('assets/Lg+3D+Maps+splash.gif', baseUrl).href; // Large gif file location
+const smallImage = new URL('assets/Sml+3D+map+splash.gif', baseUrl).href; // Small gif file location
+const closingDate = new Date('2024-10-30'); // End date for pop up screen
+const dismissedKey = `DISMISSED_MODALS_LINZ_Basemaps_3D_Map`; // Optional to set as Config.Version to disable Modal as default
+const recentUpdates = {
+  children: (
+    <>
+      <h5 className="RecentUpdatesHeading">Basemaps are now viewable in 3D!</h5>
+      <p>
+        To activate this function, click the mountains icon on the left-hand side then hold right-click to change your
+        viewpoint.
+      </p>
+      <p>The new Labels button can also be toggled to show places names.</p>
+    </>
+  ),
+  bigImage,
+  smallImage,
+};
+
+export class NewFeature extends Component {
+  enabled = new Date() <= closingDate;
+
+  override render(): ReactNode {
+    return (
+      <FeatureUpdates
+        id={dismissedKey}
+        header="What's new"
+        releaseVersion={Config.Version}
+        bigImage={recentUpdates.bigImage}
+        smallImage={recentUpdates.smallImage}
+        enabled={this.enabled}
+      >
+        {recentUpdates.children}
+      </FeatureUpdates>
+    );
+  }
+}
diff --git a/packages/landing/src/index.tsx b/packages/landing/src/index.tsx
index 8473bb979..630d67462 100644
--- a/packages/landing/src/index.tsx
+++ b/packages/landing/src/index.tsx
@@ -1,10 +1,10 @@
 import { Component, Fragment, ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { NewFeature } from './components/features/new.feature.js';
 import { Footer } from './components/layout.footer.js';
 import { Header } from './components/layout.header.js';
 import { Basemaps } from './components/map.js';
+import { NewFeature } from './components/new.feature.js';
 import { Config } from './config.js';
 import { WindowUrl } from './url.js';
 import { isWebpSupported } from './webp.js';
diff --git a/packages/landing/static/index.css b/packages/landing/static/index.css
index 858f8a8c5..0ee0f9628 100644
--- a/packages/landing/static/index.css
+++ b/packages/landing/static/index.css
@@ -257,4 +257,8 @@ have higher specifity than the default styles of the react-select component
 
 .display-none {
   display: none!important;
+}
+
+.lui-feature-img img {
+  padding: 20px;
 }
\ No newline at end of file