diff --git a/src/components/about-ipfs/AboutIpfs.js b/src/components/about-ipfs/AboutIpfs.js
index db7e8b9c8..ab86ad9ca 100644
--- a/src/components/about-ipfs/AboutIpfs.js
+++ b/src/components/about-ipfs/AboutIpfs.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 
 export const AboutIpfs = ({ t }) => {
   return (
diff --git a/src/components/about-webui/AboutWebUI.js b/src/components/about-webui/AboutWebUI.js
index 8bcb81a01..60c14d431 100644
--- a/src/components/about-webui/AboutWebUI.js
+++ b/src/components/about-webui/AboutWebUI.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 
 export const AboutWebUI = ({ t }) => {
   return (
diff --git a/src/components/box/Box.js b/src/components/box/Box.js
deleted file mode 100644
index 2233b5fea..000000000
--- a/src/components/box/Box.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import ErrorBoundary from '../error/ErrorBoundary.js'
-
-export const Box = ({
-  className = 'pa4',
-  style,
-  children,
-  ...props
-}) => {
-  return (
-    <section className={className} style={{ background: '#fbfbfb', ...style }}>
-      <ErrorBoundary>
-        {children}
-      </ErrorBoundary>
-    </section>
-  )
-}
-
-export default Box
diff --git a/src/components/box/Box.tsx b/src/components/box/Box.tsx
new file mode 100644
index 000000000..14ac5483f
--- /dev/null
+++ b/src/components/box/Box.tsx
@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react'
+import ErrorBoundary from '../error/ErrorBoundary'
+
+interface BoxProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children: ReactNode;
+  [key: string]: any; // For any additional props
+}
+
+export const Box: React.FC<BoxProps> = ({
+  className = 'pa4',
+  style,
+  children,
+  ...props
+}) => {
+  return (
+    <section
+      className={className}
+      style={{ background: '#fbfbfb', ...style }}
+      {...props}
+    >
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </section>
+  )
+}
+
+export default Box
diff --git a/src/components/experiments/ExperimentsPanel.js b/src/components/experiments/ExperimentsPanel.js
index d95dd1506..8102ce0cc 100644
--- a/src/components/experiments/ExperimentsPanel.js
+++ b/src/components/experiments/ExperimentsPanel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
 import Checkbox from '../checkbox/Checkbox.js'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 import Title from '../../settings/Title.js'
 
 const Experiments = ({ doExpToggleAction, experiments, t }) => {
diff --git a/src/components/is-connected/IsConnected.js b/src/components/is-connected/IsConnected.js
index ca47f5c84..bcb2826ae 100644
--- a/src/components/is-connected/IsConnected.js
+++ b/src/components/is-connected/IsConnected.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation } from 'react-i18next'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 import GlyphTick from '../../icons/GlyphTick.js'
 
 export const IsConnected = ({ t }) => {
diff --git a/src/components/is-not-connected/IsNotConnected.js b/src/components/is-not-connected/IsNotConnected.js
index 004ed68fe..ac27541a7 100644
--- a/src/components/is-not-connected/IsNotConnected.js
+++ b/src/components/is-not-connected/IsNotConnected.js
@@ -3,7 +3,7 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation, Trans } from 'react-i18next'
 import classNames from 'classnames'
 import ApiAddressForm from '../api-address-form/ApiAddressForm.js'
-import Box from '../box/Box.js'
+import Box from '../box/Box'
 import Shell from '../shell/Shell.js'
 import GlyphAttention from '../../icons/GlyphAttention.js'
 
diff --git a/src/files/info-boxes/add-files-info/AddFilesInfo.js b/src/files/info-boxes/add-files-info/AddFilesInfo.js
index 4b021f7fb..c8915ff6e 100644
--- a/src/files/info-boxes/add-files-info/AddFilesInfo.js
+++ b/src/files/info-boxes/add-files-info/AddFilesInfo.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box.js'
+import Box from '../../../components/box/Box'
 
 const AddFilesInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >
diff --git a/src/files/info-boxes/companion-info/CompanionInfo.js b/src/files/info-boxes/companion-info/CompanionInfo.js
index 63cb4f3db..8f1fccbf7 100644
--- a/src/files/info-boxes/companion-info/CompanionInfo.js
+++ b/src/files/info-boxes/companion-info/CompanionInfo.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box.js'
+import Box from '../../../components/box/Box'
 
 const CompanionInfo = ({ t }) => (
   <div className='mv4 tc navy f5' >
diff --git a/src/peers/PeersPage.js b/src/peers/PeersPage.js
index 4f2bcc266..a82f1b337 100644
--- a/src/peers/PeersPage.js
+++ b/src/peers/PeersPage.js
@@ -8,7 +8,7 @@ import { peersTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Components
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import WorldMap from './WorldMap/WorldMap.js'
 import PeersTable from './PeersTable/PeersTable.js'
 import AddConnection from './AddConnection/AddConnection.js'
diff --git a/src/settings/AnalyticsPage.js b/src/settings/AnalyticsPage.js
index c6c191fe8..b8b0b709f 100644
--- a/src/settings/AnalyticsPage.js
+++ b/src/settings/AnalyticsPage.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { withTranslation } from 'react-i18next'
 import Title from './Title.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
 
 export const AnalyticsPage = ({ t }) => (
diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
index 196a6db02..f738acd0e 100644
--- a/src/settings/SettingsPage.js
+++ b/src/settings/SettingsPage.js
@@ -9,7 +9,7 @@ import withTour from '../components/tour/withTour.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 // Components
 import Tick from '../icons/GlyphSmallTick.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import Button from '../components/button/button.tsx'
 import LanguageSelector from '../components/language-selector/LanguageSelector.js'
 import PinningManager from '../components/pinning-manager/PinningManager.js'
diff --git a/src/status/BandwidthStatsDisabled.js b/src/status/BandwidthStatsDisabled.js
index fee11229b..a326c9e16 100644
--- a/src/status/BandwidthStatsDisabled.js
+++ b/src/status/BandwidthStatsDisabled.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { withTranslation, Trans } from 'react-i18next'
 import Shell from '../components/shell/Shell.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 
 const StatusNotConnected = ({ t }) => {
   return (
diff --git a/src/status/PeerBandwidthTable.js b/src/status/PeerBandwidthTable.js
index 0a816d7c0..d55fb86f8 100644
--- a/src/status/PeerBandwidthTable.js
+++ b/src/status/PeerBandwidthTable.js
@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { humanSize } from '../lib/files.js'
 import CountryFlag from 'react-country-flag'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import { Title } from './Commons.js'
 import ComponentLoader from '../loader/ComponentLoader.js'
 
diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js
index ae8c969ec..7b86c01aa 100644
--- a/src/status/StatusPage.js
+++ b/src/status/StatusPage.js
@@ -10,7 +10,7 @@ import NodeInfo from './NodeInfo.js'
 import NodeInfoAdvanced from './NodeInfoAdvanced.js'
 import NodeBandwidthChart from './NodeBandwidthChart.js'
 import NetworkTraffic from './NetworkTraffic.js'
-import Box from '../components/box/Box.js'
+import Box from '../components/box/Box'
 import AnalyticsBanner from '../components/analytics-banner/AnalyticsBanner.js'
 import { statusTour } from '../lib/tours.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'