diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 28fa7bf64..761320294 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -4,6 +4,7 @@ import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@man
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
+import PingComponent from '../modules/ping/PingModule';
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -89,6 +90,7 @@ export function AppShelfItem(props: any) {
                 />
               </motion.i>
             </AspectRatio>
+            <PingComponent url={service.url} />
           </Card.Section>
         </Center>
       </Card>
diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts
index a3dce87be..134be155c 100644
--- a/src/components/modules/index.ts
+++ b/src/components/modules/index.ts
@@ -1,3 +1,4 @@
 export * from './date';
 export * from './calendar';
 export * from './search';
+export * from './ping';
diff --git a/src/components/modules/ping/PingModule.story.tsx b/src/components/modules/ping/PingModule.story.tsx
new file mode 100644
index 000000000..c781563e0
--- /dev/null
+++ b/src/components/modules/ping/PingModule.story.tsx
@@ -0,0 +1,15 @@
+import { serviceItem } from '../../../tools/types';
+import PingComponent from './PingModule';
+
+export default {
+  title: 'Modules/Search bar',
+};
+
+const service: serviceItem = {
+  type: 'Other',
+  name: 'YouTube',
+  icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
+  url: 'https://youtube.com/',
+};
+
+export const Default = (args: any) => <PingComponent service={service} />;
diff --git a/src/components/modules/ping/PingModule.tsx b/src/components/modules/ping/PingModule.tsx
new file mode 100644
index 000000000..3a27bc73c
--- /dev/null
+++ b/src/components/modules/ping/PingModule.tsx
@@ -0,0 +1,51 @@
+import { Indicator, Tooltip } from '@mantine/core';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { Plug } from 'tabler-icons-react';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+export const PingModule: IModule = {
+  title: 'Ping Services',
+  description: 'Pings your services and shows their status as an indicator',
+  icon: Plug,
+  component: PingComponent,
+};
+
+export default function PingComponent(props: any) {
+  type State = 'loading' | 'down' | 'online';
+  const { config } = useConfig();
+
+  const { url }: { url: string } = props;
+  const [isOnline, setOnline] = useState<State>('loading');
+  useEffect(() => {
+    if (!config.settings.enabledModules.includes('Ping Services')) {
+      return;
+    }
+    axios
+      .get('/api/modules/ping', { params: { url } })
+      .then(() => {
+        setOnline('online');
+      })
+      .catch(() => {
+        setOnline('down');
+      });
+  }, []);
+  if (!config.settings.enabledModules.includes('Ping Services')) {
+    return null;
+  }
+  return (
+    <Tooltip
+      radius="lg"
+      style={{ position: 'absolute', bottom: 20, right: 20 }}
+      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+    >
+      <Indicator
+        size={13}
+        color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'}
+      >
+        {null}
+      </Indicator>
+    </Tooltip>
+  );
+}
diff --git a/src/components/modules/ping/index.ts b/src/components/modules/ping/index.ts
new file mode 100644
index 000000000..f4de8c000
--- /dev/null
+++ b/src/components/modules/ping/index.ts
@@ -0,0 +1 @@
+export { PingModule } from './PingModule';
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
new file mode 100644
index 000000000..06fe31f8a
--- /dev/null
+++ b/src/pages/[slug].tsx
@@ -0,0 +1,8 @@
+import { Title } from '@mantine/core';
+import { useRouter } from 'next/router';
+
+export default function SlugPage(props: any) {
+  const router = useRouter();
+  const { slug } = router.query;
+  return <Title>ok</Title>;
+}
diff --git a/src/pages/api/modules/ping.ts b/src/pages/api/modules/ping.ts
new file mode 100644
index 000000000..b0a095d53
--- /dev/null
+++ b/src/pages/api/modules/ping.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Parse req.body as a ServiceItem
+  const { url } = req.query;
+  await axios
+    .get(url as string)
+    .then((response) => {
+      res.status(200).json(response.data);
+    })
+    .catch((error) => {
+      res.status(500).json(error);
+    });
+  // // Make a request to the URL
+  // const response = await axios.get(url);
+  // // Return the response
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};