diff --git a/src/countries/us/us.js b/src/countries/us/us.js
index 01bb11d..cd77f0c 100644
--- a/src/countries/us/us.js
+++ b/src/countries/us/us.js
@@ -2,7 +2,6 @@ import { CssBaseline, Grid, Card, CardContent, Container, Typography, CardMedia,
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 // import Copyright from '../components/Copyright';
-import SubmitArticle from '../../components/SubmitArticle';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
diff --git a/src/delete/SubmitArticle.js b/src/delete/SubmitArticle.js
new file mode 100644
index 0000000..c548e7b
--- /dev/null
+++ b/src/delete/SubmitArticle.js
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { TextField, Button, CircularProgress, Box } from '@mui/material';
+import * as React from 'react';
+
+const SubmitArticle = () => {
+  const [article, setArticle] = useState('');
+  const [mediaOrg, setMediaOrg] = useState('');
+  const [url, setUrl] = useState('');
+  const [iam, setIam] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+    const requestBody = {
+      article,
+      mediaOrg,
+      url,
+      iam,
+    };
+    try {
+      const response = await fetch('https://sample.com/submit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(requestBody),
+      });
+      console.log('response:', response);
+      setIsLoading(false);
+      setArticle('');
+      setMediaOrg('');
+      setUrl('');
+      setIam('');
+    } catch (error) {
+      console.error('error:', error);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Box sx={{ mt: 2, mb: 1 }}>
+        <h3>Submit new article here</h3>
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '400px', width: '100%' }}>
+        <TextField
+          label="Article"
+          variant="outlined"
+          value={article}
+          onChange={(event) => setArticle(event.target.value)}
+        />
+        <TextField
+          label="Media Organization"
+          variant="outlined"
+          value={mediaOrg}
+          onChange={(event) => setMediaOrg(event.target.value)}
+        />
+        <TextField label="URL" variant="outlined" value={url} onChange={(event) => setUrl(event.target.value)} />
+        <TextField label="I am" variant="outlined" value={iam} onChange={(event) => setIam(event.target.value)} />
+      </Box>
+      <Box sx={{ mt: 2 }}>
+        <Button variant="contained" onClick={handleSubmit}>
+          Submit
+        </Button>
+      </Box>
+      {isLoading && <CircularProgress sx={{ mt: 2 }} />}
+    </Box>
+  );
+};
+export default SubmitArticle;
\ No newline at end of file
diff --git a/src/pages/ai-articles.jsx b/src/pages/ai-articles.jsx
deleted file mode 100644
index 22da353..0000000
--- a/src/pages/ai-articles.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export default function AIArticles () {
-    return(<p>"Some good AI articles to read here</p>)
-}
\ No newline at end of file
diff --git a/src/pages/country.js b/src/pages/country.js
deleted file mode 100644
index 7f90beb..0000000
--- a/src/pages/country.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Grid, Card, CardContent, Container, Typography, CardMedia } from '@mui/material';
-import * as React from 'react';
-import Copyright from '../components/Copyright';
-import SubmitArticle from '../components/SubmitArticle';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-
-export default function Country({countryData}) {
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleChange = (panel) => (event, isExpanded) => {
-    setExpanded(isExpanded ? panel : false);
-  };
-
-  const emptyCountry = <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}><Typography sx={{ width: '33%', flexShrink: 0 }}>
-  Nothing much going on here, seems fishy. lets investigate a bit more...
-</Typography></Accordion>;
-
-  return (
-    <div>
-      {countryData ? countryData : emptyCountry}
-      <SubmitArticle />
-        <Copyright />
-    </div>
-  );
-}
-// export default function Country () {
-//     return(
-//         //accordion
-//         <>
-//         country
-//         <SubmitArticle />
-//         <Copyright />
-//         </>
-//     )
-// }
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 2db2190..3c63325 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,7 +5,6 @@ import { Box, Divider } from '@mui/material';
 import Link from '../components/Link';
 import Copyright from '../components/Copyright';
 import CountryGrid from '../components/CardGrid';
-import SubmitArticle from '../components/SubmitArticle';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';