diff --git a/src/Router.jsx b/src/Router.jsx
index be8a0a8..f88f731 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Routes, BrowserRouter, Route } from "react-router-dom";
 import HomePage from "./pages/Home/HomePage.jsx";
 import Executions from "./components/Executions.jsx";
-import Scripts from "./components/Scripts.jsx";
+import ScriptsPage from "./pages/Script/ScriptsPage.jsx";
 import Dagre from "./components/dagre/Dagre.jsx";
 import NoMatch from "./components/NoMatch.jsx";
 import Layout from "./layouts/Layout.jsx";
@@ -13,7 +13,7 @@ const Router = () => {
       <Routes>
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
-          <Route path="scripts" element={<Scripts />} />
+          <Route path="scripts" element={<ScriptsPage />} />
           <Route path="executions" element={<Executions />} />
           <Route path="script" element={<Dagre />} />
           <Route path="*" element={<NoMatch />} />
diff --git a/src/components/Scripts.jsx b/src/components/Scripts.jsx
deleted file mode 100644
index 0581217..0000000
--- a/src/components/Scripts.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { Grid } from "semantic-ui-react";
-import ScriptsTree from "./treebeard/ScriptsTree";
-
-class Scripts extends React.Component {
-  render() {
-    return (
-      <Grid stackable columns={2}>
-        <Grid.Row>
-          <Grid.Column>
-            <ScriptsTree />
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    );
-  }
-}
-
-export default Scripts;
diff --git a/src/components/treebeard/ScriptsTree.jsx b/src/components/treebeard/ScriptsTree.jsx
index 591b69d..aeacddb 100644
--- a/src/components/treebeard/ScriptsTree.jsx
+++ b/src/components/treebeard/ScriptsTree.jsx
@@ -101,8 +101,6 @@ class ScriptsTree extends React.Component {
     } else {
       return (
         <Fragment>
-          <h3>Scripts</h3>
-          <p>Right click on directory/file to add/remove file</p>
           <div style={styles.component}>
             <Treebeard
               data={this.state.data}
diff --git a/src/pages/Script/ScriptsPage.jsx b/src/pages/Script/ScriptsPage.jsx
new file mode 100644
index 0000000..c19b5e0
--- /dev/null
+++ b/src/pages/Script/ScriptsPage.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import ScriptsTree from "../../components/treebeard/ScriptsTree.jsx";
+import { Typography } from "@mui/material";
+
+const ScriptsPage = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6}>
+        <Typography variant="h4" component="h3" gutterBottom>
+          Scripts
+        </Typography>
+        <Typography variant="body1" component="p" gutterBottom>
+          Right-click on directory/file to add/remove file
+        </Typography>
+        <ScriptsTree />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ScriptsPage;