diff --git a/pages/CollectionDetailPage.js b/pages/CollectionDetailPage.js
new file mode 100644
index 0000000..7534dd6
--- /dev/null
+++ b/pages/CollectionDetailPage.js
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Box, Button, TextField, Typography } from "@mui/material";
+
+const CollectionDetailPage = ({ collection }) => {
+  const [newConcept, setNewConcept] = useState("");
+  const [concepts, setConcepts] = useState(collection.concepts || []);
+
+  const handleAddConcept = () => {
+    if (newConcept) {
+      setConcepts((prev) => [...prev, newConcept]);
+      setNewConcept("");
+    }
+  };
+
+  return (
+    <Box>
+      <Typography variant="h4">{collection.name}</Typography>
+      <Typography variant="h6">Concepts:</Typography>
+      
+      {concepts.length > 0 ? (
+        <ul>
+          {concepts.map((concept, index) => (
+            <li key={index}>{concept}</li>
+          ))}
+        </ul>
+      ) : (
+        <Typography>No concepts available.</Typography>
+      )}
+
+      <TextField
+        label="Add New Concept"
+        value={newConcept}
+        onChange={(e) => setNewConcept(e.target.value)}
+      />
+      <Button onClick={handleAddConcept} variant="contained" color="primary">
+        Add Concept
+      </Button>
+    </Box>
+  );
+};
+
+export default CollectionDetailPage;
diff --git a/pages/collection/[id].js b/pages/collection/[id].js
new file mode 100644
index 0000000..51c2644
--- /dev/null
+++ b/pages/collection/[id].js
@@ -0,0 +1,33 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Box, Typography } from "@mui/material";
+
+const CollectionDetails = () => {
+  const router = useRouter();
+  const { id } = router.query;
+  const [collection, setCollection] = useState(null);
+
+  useEffect(() => {
+    if (id) {
+      // Fetch collection details based on the ID
+      fetch(`/api/collections/${id}`)
+        .then((res) => res.json())
+        .then((data) => setCollection(data))
+        .catch((err) => console.error(err));
+    }
+  }, [id]);
+
+  if (!collection) return <Typography>Loading...</Typography>;
+
+  return (
+    <Box sx={{ p: 3 }}>
+      <Typography variant="h4">{collection.name}</Typography>
+      <Typography variant="h6">Owner: {collection.owner}</Typography>
+      <Typography variant="body1">Collection Type: {collection.collectionType}</Typography>
+      <Typography variant="body2">Created At: {new Date(collection.createdAt).toLocaleString()}</Typography>
+      <Typography variant="body2">Concepts: {collection.concepts.join(', ')}</Typography>
+    </Box>
+  );
+};
+
+export default CollectionDetails;
diff --git a/pages/createCollections.js b/pages/createCollections.js
new file mode 100644
index 0000000..0937740
--- /dev/null
+++ b/pages/createCollections.js
@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Button,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+
+const CreateCollectionModal = ({ onCollectionCreated }) => {
+  const [open, setOpen] = useState(false);
+  const [collectionDetails, setCollectionDetails] = useState({
+    id: "",
+    short_code: "",
+    short_name: "",
+    full_name: "",
+    owner: "",
+    description: "",
+    collection_type: "",
+    custom_validation_schema: "",
+    canonical_url: "",
+  });
+
+  const handleOpen = () => {
+    setCollectionDetails({
+      id: "",
+      short_code: "",
+      short_name: "",
+      full_name: "",
+      owner: "",
+      description: "",
+      collection_type: "",
+      custom_validation_schema: "",
+      canonical_url: "",
+    });
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
+
+  const handleSubmit = async () => {
+    if (!collectionDetails.short_code || !collectionDetails.full_name || !collectionDetails.owner) {
+      alert("Short Code, Full Name, and Owner are required!");
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/collections', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(collectionDetails),
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      const createdCollection = await response.json();
+      onCollectionCreated(createdCollection);
+      handleClose();
+    } catch (error) {
+      console.error("Error creating collection:", error);
+      alert("Failed to create collection.");
+    }
+  };
+
+  return (
+    <Box>
+      <Button variant="contained" color="primary" onClick={handleOpen}>
+        Create Collection
+      </Button>
+
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Create New Collection</DialogTitle>
+        <DialogContent>
+          <Typography variant="h6">Name and Description</Typography>
+          <TextField
+            label="ID"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.id}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, id: e.target.value })}
+            required
+          />
+          <TextField
+            label="Short Code"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.short_code}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, short_code: e.target.value })}
+            required
+          />
+          <TextField
+            label="Short Name"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.short_name}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, short_name: e.target.value })}
+          />
+          <TextField
+            label="Full Name"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.full_name}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, full_name: e.target.value })}
+            required
+          />
+          <TextField
+            label="Description"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.description}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, description: e.target.value })}
+          />
+          <TextField
+            label="Owner"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.owner}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, owner: e.target.value })}
+            required
+          />
+
+          <Typography variant="h6" mt={2}>Configuration</Typography>
+          <TextField
+            label="Collection Type"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.collection_type}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, collection_type: e.target.value })}
+            required
+          />
+          <TextField
+            label="Custom Validation Schema"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.custom_validation_schema}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, custom_validation_schema: e.target.value })}
+          />
+          <TextField
+            label="Canonical URL"
+            fullWidth
+            margin="dense"
+            value={collectionDetails.canonical_url}
+            onChange={(e) => setCollectionDetails({ ...collectionDetails, canonical_url: e.target.value })}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="secondary">
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} color="primary">
+            Submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default CreateCollectionModal;
diff --git a/pages/index.js b/pages/index.js
index f025028..77aa0ce 100755
--- a/pages/index.js
+++ b/pages/index.js
@@ -31,6 +31,8 @@ import { useRouter } from "next/router";
 import Footer from "@/components/footer";
 import VerifyEmail from "@/pages/auth/verifyEmail";
 import { redirect } from "next/navigation";
+import CreateCollectionModal from "./createCollections";
+
 const inter = Inter({ subsets: ["latin"] });
 export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 export default function Home() {
@@ -99,6 +101,20 @@ export default function Home() {
     fetchDomains();
     fetchCollections();
   }, []);
+
+  const handleCollectionCreated = (newCollection) => {
+    setCollections((prevCollections) => [
+      ...prevCollections,
+      {
+        id: newCollection.id,
+        name: newCollection.full_name,
+        owner: newCollection.owner,
+        collection_type: newCollection.collection_type,
+        created_at: new Date().toISOString(),
+      },
+    ]);
+  };
+
   return (
     <>
       <Head>
@@ -376,11 +392,16 @@ export default function Home() {
                 </TableContainer>
               </Box>
             </TabPanel>
+
             <TabPanel value="3">
               <Box
                 sx={{ flexGrow: "1", display: "flex", flexDirection: "column" }}
               >
                 <Typography variant="h4">Collections</Typography>
+                <CreateCollectionModal
+                  onCollectionCreated={handleCollectionCreated}
+                />
+
                 <TableContainer>
                   <Table>
                     <TableHead>
@@ -397,16 +418,11 @@ export default function Home() {
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {collections.map((coll, index) => (
+                      {collections.map((coll) => (
                         <TableRow
-                          key={index}
-                          sx={
-                            {
-                              // ":hover": { color: '#1651B6', cursor: 'pointer' }
-                            }
-                          }
-                          onClick={(e) => {
-                            router.push(coll.url);
+                          key={coll.id}
+                          onClick={() => {
+                            router.push(`/collection/${coll.id}`);
                           }}
                         >
                           <TableCell>{coll.id}</TableCell>
@@ -414,7 +430,9 @@ export default function Home() {
                           <TableCell>{coll.owner}</TableCell>
                           <TableCell>{coll.collection_type}</TableCell>
                           <TableCell>
-                            {new Date(coll.created_at).toLocaleString()}
+                            {coll.created_at
+                              ? new Date(coll.created_at).toLocaleString()
+                              : new Date().toLocaleString()}
                           </TableCell>
                         </TableRow>
                       ))}