diff --git a/Client/package-lock.json b/Client/package-lock.json
index be9cd25f1..73edbf7fb 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -2647,6 +2647,7 @@
       "integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==",
       "dev": true,
       "license": "ISC"
+
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
diff --git a/Client/src/Components/Integrations/index.jsx b/Client/src/Components/Integrations/index.jsx
index b0e00bdfe..4709adef6 100644
--- a/Client/src/Components/Integrations/index.jsx
+++ b/Client/src/Components/Integrations/index.jsx
@@ -1,11 +1,17 @@
 import { Box, Typography, useTheme } from '@mui/material';
 import Button from '../Button';
+import PropTypes from 'prop-types';
 
 /**
  * Integrations component
- * @returns {JSX.Element}
+ * @param {Object} props - Props for the IntegrationsComponent.
+ * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.header - The header for the integration.
+ * @param {string} props.info - Information about the integration.
+ * @param {Function} props.onClick - The onClick handler for the integration button.
+ * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
  */
-const Integrations = () => {
+const IntegrationsComponent = ({ url, header, info, onClick }) => {
   const theme = useTheme();
 
   return (
@@ -19,8 +25,8 @@ const Integrations = () => {
     >
       <Box
         component="img"
-        src="https://via.placeholder.com/100"
-        alt="Placeholder"
+        src={url}
+        alt="Integration"
         width={100}
         height={100}
       />
@@ -32,8 +38,8 @@ const Integrations = () => {
         flexDirection="column"
         alignItems="flex-start"
       >
-        <Typography variant="h6" component="div">
-          Header
+        <Typography variant="h6" component="div" style={{ fontSize: '16px' }}>
+          {header}
         </Typography>
         <Typography
           variant="body1"
@@ -43,14 +49,23 @@ const Integrations = () => {
             wordWrap: 'break-word',
             textAlign: 'left'
           }}
+          style={{ fontSize: '13px' }}
         >
-          This is a paragraph that provides more detail about the header.
+          {info}
         </Typography>
       </Box>
       
-      <Button label="Click Me" level="primary" />
+      <Button label="Click Me" level="primary" onClick={onClick} />
     </Box>
   );
 };
 
-export default Integrations;
+// PropTypes for IntegrationsComponent
+IntegrationsComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  info: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export default IntegrationsComponent;
diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index 1df87ee52..5cde4f4db 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -1,9 +1,70 @@
-import React from 'react'
+import { Box, Typography, useTheme } from '@mui/material';
+import IntegrationsComponent from '../../Components/Integrations';
 
+
+/**
+ * Integrations Page Component
+ * @returns {JSX.Element} The JSX representation of the Integrations page.
+ */
 const Integrations = () => {
-    return (
-        <div>Integrations</div>
-    )
-}
+  const theme = useTheme();
 
-export default Integrations
\ No newline at end of file
+
+  const integrations = [
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 1',
+      info: 'Info about Integration 1',
+      onClick: () => {} 
+    },
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 2',
+      info: 'Info about Integration 2',
+      onClick: () => {} 
+    }, 
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 2',
+      info: 'Info about Integration 2',
+      onClick: () => {} 
+    }
+    // Add more integrations as needed
+  ];
+
+  return (
+    <Box 
+      display="flex"
+      flexDirection="column"
+      alignItems="flex-start"
+      justifyContent="flex-start"
+      height="100vh"
+      p={theme.spacing(4)}
+      mt={theme.spacing(8)} 
+    >
+      <Typography variant="h4" component="h1" gutterBottom style={{ fontSize: '16px' }}>
+        Integrations
+      </Typography>
+      <Typography variant="h6" component="h2" gutterBottom style={{ fontSize: '13px' }}>
+        Connect Uptime Genie to your favorite service
+      </Typography>
+      <Box 
+        display="flex" 
+        flexWrap="wrap" 
+        gap={theme.spacing(4)}
+      >
+        {integrations.map((integration, index) => (
+          <IntegrationsComponent 
+            key={index}
+            url={integration.url}
+            header={integration.header}
+            info={integration.info}
+            onClick={integration.onClick}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Integrations;