diff --git a/src/App.tsx b/src/App.tsx
index de11a2d..733204d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Home from './pages/Home/Home';
 import Components from './pages/Components/Components';
 import Utilities from './pages/Utilities';
 import Documentation from './pages/Documentation';
-import Examples from './pages/Examples';
+import Examples from './pages/Examples/Examples';
 import SignUp from './pages/SignUp/SignUp';
 import Login from './pages/Login/Login';
 
diff --git a/src/pages/Examples.tsx b/src/pages/Examples.tsx
deleted file mode 100644
index 7a6f185..0000000
--- a/src/pages/Examples.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Examples: React.FC = () => {
-  return <div>Examples</div>;
-};
-
-export default Examples;
\ No newline at end of file
diff --git a/src/pages/Examples/Examples.module.css b/src/pages/Examples/Examples.module.css
new file mode 100644
index 0000000..6856431
--- /dev/null
+++ b/src/pages/Examples/Examples.module.css
@@ -0,0 +1,79 @@
+.examplesPage {
+    padding: 20px;
+    text-align: center;
+  }
+  
+  .heading {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+  }
+  
+  .examplesGrid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+  }
+  
+  .exampleBox {
+    width: 300px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+  }
+  
+  .exampleBox:hover {
+    transform: translateY(-10px);
+  }
+  
+  .image {
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+  
+  .title {
+    font-size: 1.5rem;
+    margin: 16px 0;
+  }
+  
+  .description {
+    font-size: 1rem;
+    color: #555;
+    margin-bottom: 16px;
+  }
+  
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .demoButton,
+  .downloadButton {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .demoButton {
+    background-color: #007bff;
+    color: #fff;
+  }
+  
+  .demoButton:hover {
+    background-color: #0056b3;
+  }
+  
+  .downloadButton {
+    background-color: #28a745;
+    color: #fff;
+  }
+  
+  .downloadButton:hover {
+    background-color: #218838;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/Examples/Examples.tsx b/src/pages/Examples/Examples.tsx
new file mode 100644
index 0000000..8cc7a08
--- /dev/null
+++ b/src/pages/Examples/Examples.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import styles from './Examples.module.css';
+import { useNavigate } from 'react-router-dom';
+
+const Example = ({ title, description, demoLink, downloadLink, imageUrl }) => (
+  <div className={styles.exampleBox}>
+    <img src={imageUrl} alt={`${title} screenshot`} className={styles.image} />
+    <h2 className={styles.title}>{title}</h2>
+    <p className={styles.description}>{description}</p>
+    <div className={styles.buttons}>
+      <button onClick={() => window.location.href = demoLink} className={styles.demoButton}>Show Demo</button>
+      <button onClick={() => window.location.href = downloadLink} className={styles.downloadButton}>Download</button>
+    </div>
+  </div>
+);
+
+const Examples = () => {
+  const navigate = useNavigate();
+
+  const examples = [
+    {
+      title: 'Template 1',
+      description: 'A modern and responsive template for businesses.',
+      demoLink: '/examples/template1',
+      downloadLink: '/downloads/template1.zip',
+      imageUrl: 'https://via.placeholder.com/400x300',
+    },
+    {
+      title: 'Template 2',
+      description: 'A clean and minimalist template for portfolios.',
+      demoLink: '/examples/template2',
+      downloadLink: '/downloads/template2.zip',
+      imageUrl: 'https://via.placeholder.com/400x300',
+    },
+    {
+      title: 'Template 3',
+      description: 'A vibrant and dynamic template for startups.',
+      demoLink: '/examples/template3',
+      downloadLink: '/downloads/template3.zip',
+      imageUrl: 'https://via.placeholder.com/400x300',
+    },
+    {
+      title: 'Template 4',
+      description: 'A professional template for corporate websites.',
+      demoLink: '/examples/template4',
+      downloadLink: '/downloads/template4.zip',
+      imageUrl: 'https://via.placeholder.com/400x300',
+    },
+    {
+      title: 'Template 5',
+      description: 'An elegant template for blogs and magazines.',
+      demoLink: '/examples/template5',
+      downloadLink: '/downloads/template5.zip',
+      imageUrl: 'https://via.placeholder.com/400x300',
+    },
+  ];
+
+  return (
+    <div className={styles.examplesPage}>
+      <h1 className={styles.heading}>Examples</h1>
+      <div className={styles.examplesGrid}>
+        {examples.map((example, index) => (
+          <Example
+            key={index}
+            title={example.title}
+            description={example.description}
+            demoLink={example.demoLink}
+            downloadLink={example.downloadLink}
+            imageUrl={example.imageUrl}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Examples;