diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
index c642a4a..1a81e78 100644
--- a/frontend/src/api/api.ts
+++ b/frontend/src/api/api.ts
@@ -1,32 +1,15 @@
-import axios, { AxiosInstance } from "axios";
-
-export interface Part {
-  description: string;
-  owner: string;
-  images: Image[];
-  part_id: string;
-  part_name: string;
-}
-
-export interface Bom {
-  part_id: string;
-  quantity: number;
-}
+import { AxiosInstance } from "axios";
+import { Collection } from "types/model";
 
 export interface Image {
   filename: string;
   s3_url: string;
 }
 
-export interface Robot {
-  robot_id: string;
-  name: string;
+export interface CollectionCreateFragment {
+  title: string;
   description: string;
-  owner: string;
-  bom: Bom[];
-  images: Image[];
 }
-
 export class api {
   public api: AxiosInstance;
 
@@ -50,131 +33,22 @@ export class api {
       return { s3_url: "", filename: "" };
     }
   }
-  public async getUserById(userId: string | undefined): Promise<string> {
-    const response = await this.api.get(`/users/${userId}`);
-    return response.data.email;
+  public async createCollection(
+    data: CollectionCreateFragment,
+  ): Promise<Collection | null> {
+    const response = await this.api.post("/create_collection", data);
+    return response.data;
   }
-  public async getRobots(): Promise<Robot[]> {
-    try {
-      const response = await this.api.get("/robots/");
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error fetching robots:", error.response?.data);
-        throw new Error(
-          error.response?.data?.detail || "Error fetching robots",
-        );
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
+  public async getCollection(id: string): Promise<Collection | null> {
+    const response = await this.api.get(`/get_collection?id=${id}`);
+    return response.data;
   }
-  public async getYourRobots(): Promise<Robot[]> {
-    try {
-      const response = await this.api.get("/robots/your/");
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error fetching robots:", error.response?.data);
-        throw new Error(
-          error.response?.data?.detail || "Error fetching robots",
-        );
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
-  }
-  public async getRobotById(robotId: string | undefined): Promise<Robot> {
-    try {
-      const response = await this.api.get(`/robots/${robotId}`);
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error fetching robot:", error.response?.data);
-        throw new Error(error.response?.data?.detail || "Error fetching robot");
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
+  public async editCollection(data: Collection): Promise<null> {
+    await this.api.post(`/edit_collection`, data);
+    return null;
   }
-  public async getPartById(partId: string | undefined): Promise<Part> {
-    try {
-      const response = await this.api.get(`/parts/${partId}`);
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error fetching robot:", error.response?.data);
-        throw new Error(error.response?.data?.detail || "Error fetching robot");
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
-  }
-  public async addRobot(robot: Robot): Promise<void> {
-    const s = robot.name;
-    try {
-      await this.api.post("/robots/add/", robot);
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error adding robot:", error.response?.data);
-        throw new Error(
-          error.response?.data?.detail || "Error adding robot " + s,
-        );
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
-  }
-  public async getParts(): Promise<Part[]> {
-    try {
-      const response = await this.api.get("/parts/");
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error fetching parts:", error.response?.data);
-        throw new Error(error.response?.data?.detail || "Error fetching parts");
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
-  }
-  public async getYourParts(): Promise<Part[]> {
-    try {
-      const response = await this.api.get("/parts/your/");
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error("Error fetching parts:", error.response?.data);
-        throw new Error(error.response?.data?.detail || "Error fetching parts");
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
-  }
-  public async addPart(part: Part): Promise<void> {
-    const s = part.part_name;
-    try {
-      await this.api.post("/parts/add/", part);
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        console.error(
-          "Error adding part:" + part.part_name,
-          error.response?.data,
-        );
-        throw new Error(
-          error.response?.data?.detail || "Error adding part " + s,
-        );
-      } else {
-        console.error("Unexpected error:", error);
-        throw new Error("Unexpected error");
-      }
-    }
+  public async getAllCollections(): Promise<Array<Collection> | null> {
+    const response = await this.api.get(`/get_collections`);
+    return response.data;
   }
 }
diff --git a/frontend/src/components/card.tsx b/frontend/src/components/card.tsx
index ebd9781..71116af 100644
--- a/frontend/src/components/card.tsx
+++ b/frontend/src/components/card.tsx
@@ -14,7 +14,7 @@ const CardItem: React.FC<Collection> = (collectionProps) => {
   };
 
   return (
-    <div className="relative m-4 group">
+    <div className="relative m-8 group">
       <div className="relative z-10 w-52 h-72 p-3 bg-rose-100 dark:bg-gray-900 border flex flex-col gap-2 opacity-95">
         <h3 className="text-lg font-bold">{title}</h3>
         <p className="text-sm text-gray-900 dark:text-gray-100">
diff --git a/frontend/src/pages/Collection.tsx b/frontend/src/pages/Collection.tsx
index cb36780..f859894 100644
--- a/frontend/src/pages/Collection.tsx
+++ b/frontend/src/pages/Collection.tsx
@@ -1,10 +1,13 @@
+import { api } from "api/api";
+import axios, { AxiosInstance } from "axios";
 import ImageComponent from "components/image";
+import { useAuth } from "contexts/AuthContext";
+import { useLoading } from "contexts/LoadingContext";
 import React, { useEffect, useState } from "react";
 import { Col, Row } from "react-bootstrap";
 import { ArrowLeft } from "react-bootstrap-icons";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { Image } from "types/model";
-
+import { Collection, Image } from "types/model";
 // Truncated mock data
 
 const images: Array<Image> = [
@@ -48,17 +51,34 @@ const CollectionPage: React.FC = () => {
   const [description, setDescription] = useState("");
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [currentImage, setCurrentImage] = useState<Image | null>(null);
+  const [collection, setCollection] = useState<Collection | null>(null);
+  const { auth, is_auth } = useAuth();
+  const { startLoading, stopLoading } = useLoading();
 
+  const apiClient: AxiosInstance = axios.create({
+    baseURL: process.env.REACT_APP_BACKEND_URL, // Base URL for all requests
+    timeout: 10000, // Request timeout (in milliseconds)
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${auth?.token}`, // Add any default headers you need
+    },
+  });
+  const API = new api(apiClient);
   // Helper to check if it's an edit action
   const isEditAction = location.search.includes("Action=edit");
 
   // Simulate fetching data for the edit page (mocking API call)
   useEffect(() => {
-    if (id && isEditAction) {
-      setTitle("Sample Collection Title");
-      setDescription("Sample collection description");
+    if (id && is_auth) {
+      startLoading();
+      const asyncfunction = async () => {
+        const collection = await API.getCollection(id);
+        setCollection(collection);
+        stopLoading();
+      };
+      asyncfunction();
     }
-  }, [id, isEditAction]);
+  }, [id, is_auth]);
 
   // Get translated images
   const translatedImages = images.filter((img) => img.is_translated);
@@ -69,6 +89,14 @@ const CollectionPage: React.FC = () => {
     }
   }, [currentImageIndex, translatedImages]);
 
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    startLoading();
+    const collection = await API.createCollection({ title, description });
+    if (collection != null)
+      navigate(`/collection/${collection.id}?Action=edit`);
+    stopLoading();
+  };
   // Navigate between images
   const handleNext = () => {
     if (currentImageIndex < translatedImages.length - 1) {
@@ -87,6 +115,17 @@ const CollectionPage: React.FC = () => {
     navigate("/collections");
   };
 
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (collection) {
+      const asyncfunction = async () => {
+        startLoading();
+        await API.editCollection(collection);
+        stopLoading();
+      };
+      asyncfunction();
+    }
+  };
   // Custom Return Button (fixed top-left with border)
   const ReturnButton = () => (
     <button
@@ -100,65 +139,83 @@ const CollectionPage: React.FC = () => {
   // Rendering New Collection Page
   if (!id) {
     return (
-      <div className="flex flex-col items-center pt-20 gap-4">
+      <div className="flex flex-col items-center pt-20 gap-8">
         <h1>New Collection</h1>
-        <div className="mt-4">
+        <form
+          className="flex flex-col items-end gap-4 w-96"
+          onSubmit={handleCreate}
+        >
           <input
-            className="border p-2 w-80"
+            className="border p-2 w-full"
             type="text"
             placeholder="Title"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
+            required
           />
-        </div>
-        <div className="mt-4">
           <textarea
-            className="border p-2 w-80 h-32"
+            className="border p-2 w-full h-32"
             placeholder="Description"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
+            required
           />
-        </div>
-        <div className="mt-4 flex gap-2">
-          <button className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">
+          <button
+            className="bg-blue-500 w-32 text-white p-2 rounded hover:bg-blue-600"
+            type="submit"
+          >
             Create
           </button>
-        </div>
+        </form>
         <ReturnButton />
       </div>
     );
   }
 
   // Rendering Edit Collection Page
-  if (id && isEditAction) {
+  if (id && isEditAction && collection) {
     return (
       <div className="flex flex-col items-center pt-20 gap-4">
-        <h1>Edit Collection {id}</h1>
-        <div className="mt-4 w-full">
-          <input
-            className="border p-2 w-full"
-            type="text"
-            placeholder="Title"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-          />
-        </div>
-        <div className="mt-4 w-full">
-          <textarea
-            className="border p-2 h-32 w-full"
-            placeholder="Description"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-          />
-        </div>
-        <div className="mt-4 flex justify-content-end w-full gap-2">
-          <button className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600">
-            Save Changes
-          </button>
-          <button className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600">
-            Images Upload
-          </button>
-        </div>
+        <h1>Edit Collection </h1>
+        <form
+          className="flex flex-col items-center gap-4 w-full"
+          onSubmit={handleSave}
+        >
+          <div className="mt-4 w-full">
+            <input
+              className="border p-2 w-full"
+              type="text"
+              placeholder="Title"
+              value={collection.title}
+              onChange={(e) =>
+                setCollection({ ...collection, title: e.target.value })
+              }
+              required
+            />
+          </div>
+          <div className="mt-4 w-full">
+            <textarea
+              className="border p-2 h-32 w-full"
+              placeholder="Description"
+              value={collection.description}
+              onChange={(e) =>
+                setCollection({ ...collection, description: e.target.value })
+              }
+              required
+            />
+          </div>
+          <div className="mt-4 flex justify-content-end w-full gap-2">
+            <button
+              className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600"
+              type="submit"
+            >
+              Save Changes
+            </button>
+            <button className="bg-blue-500 text-white w-30 p-2 rounded hover:bg-blue-600">
+              Images Upload
+            </button>
+          </div>
+        </form>
         <Row className="align-items-center w-full">
           {images.map((image) => {
             return (
@@ -174,54 +231,58 @@ const CollectionPage: React.FC = () => {
   }
 
   // Rendering Collection Detail Page
-  return (
-    <div className="flex flex-col items-center pt-20 gap-4">
-      <h1 className="text-lg font-bold mb-4">Collection Details {id}</h1>
-      {currentImage ? (
-        <div className="flex flex-col align-items-center">
-          <img
-            src={currentImage.image_url}
-            alt="Collection Image"
-            className="max-h-96 h-auto mx-auto mb-4"
-          />
-          <p className="mt-2">{currentImage.transcript}</p>
-          <audio controls className="mt-4 w-full">
-            <source src={currentImage.audio_url} type="audio/mpeg" />
-            Your browser does not support the audio element.
-          </audio>
+  if (id && !isEditAction && collection) {
+    return (
+      <div className="flex flex-col items-center pt-20 gap-4">
+        <h1 className="text-xl font-bold mb-4">{collection.title}</h1>
+        <p className="text-md mb-4">{collection.description}</p>
+        {currentImage ? (
+          <div className="flex flex-col align-items-center">
+            <img
+              src={currentImage.image_url}
+              alt="Collection Image"
+              className="max-h-96 h-auto mx-auto mb-4"
+            />
+            <p className="mt-2">{currentImage.transcript}</p>
+            <audio controls className="mt-4 w-full">
+              <source src={currentImage.audio_url} type="audio/mpeg" />
+              Your browser does not support the audio element.
+            </audio>
 
-          {/* Navigation Buttons */}
-          <div className="flex justify-between mt-4 w-40">
-            <button
-              className={`px-3 py-1 rounded ${
-                currentImageIndex === 0
-                  ? "bg-gray-300 text-gray-600 cursor-not-allowed"
-                  : "bg-gray-500 text-white hover:bg-gray-600"
-              }`}
-              onClick={handlePrev}
-              disabled={currentImageIndex === 0}
-            >
-              Prev
-            </button>
-            <button
-              className={`px-3 py-1 rounded ${
-                currentImageIndex === translatedImages.length - 1
-                  ? "bg-gray-300 text-gray-600 cursor-not-allowed"
-                  : "bg-gray-500 text-white hover:bg-gray-600"
-              }`}
-              onClick={handleNext}
-              disabled={currentImageIndex === translatedImages.length - 1}
-            >
-              Next
-            </button>
+            {/* Navigation Buttons */}
+            <div className="flex justify-between mt-4 w-40">
+              <button
+                className={`px-3 py-1 rounded ${
+                  currentImageIndex === 0
+                    ? "bg-gray-300 text-gray-600 cursor-not-allowed"
+                    : "bg-gray-500 text-white hover:bg-gray-600"
+                }`}
+                onClick={handlePrev}
+                disabled={currentImageIndex === 0}
+              >
+                Prev
+              </button>
+              <button
+                className={`px-3 py-1 rounded ${
+                  currentImageIndex === translatedImages.length - 1
+                    ? "bg-gray-300 text-gray-600 cursor-not-allowed"
+                    : "bg-gray-500 text-white hover:bg-gray-600"
+                }`}
+                onClick={handleNext}
+                disabled={currentImageIndex === translatedImages.length - 1}
+              >
+                Next
+              </button>
+            </div>
           </div>
-        </div>
-      ) : (
-        <div>No translated images available.</div>
-      )}
-      <ReturnButton />
-    </div>
-  );
+        ) : (
+          <div>No translated images available.</div>
+        )}
+        <ReturnButton />
+      </div>
+    );
+  }
+  return <></>;
 };
 
 export default CollectionPage;
diff --git a/frontend/src/pages/Collections.tsx b/frontend/src/pages/Collections.tsx
index dafdd03..8774a3c 100644
--- a/frontend/src/pages/Collections.tsx
+++ b/frontend/src/pages/Collections.tsx
@@ -1,15 +1,39 @@
+import { api } from "api/api";
+import axios, { AxiosInstance } from "axios";
 import CardItem from "components/card";
 import NewCardItem from "components/new_card";
+import { useAuth } from "contexts/AuthContext";
+import { useLoading } from "contexts/LoadingContext";
+import { useEffect, useState } from "react";
 import { Col, Row } from "react-bootstrap";
 import { Collection } from "types/model";
-const myCollection: Collection = {
-  id: "1",
-  title: "My First Collection",
-  description: "A collection of my favorite images.",
-  images: ["image1.jpg", "image2.jpg", "image3.jpg"],
-};
 
 const Collections = () => {
+  const [collections, setCollection] = useState<Array<Collection> | null>(null);
+  const { is_auth, auth } = useAuth();
+  const { startLoading, stopLoading } = useLoading();
+  useEffect(() => {
+    if (is_auth) {
+      const asyncfunction = async () => {
+        startLoading();
+        const collections = await API.getAllCollections();
+        setCollection(collections);
+        stopLoading();
+      };
+      asyncfunction();
+    }
+  }, [is_auth]);
+
+  const apiClient: AxiosInstance = axios.create({
+    baseURL: process.env.REACT_APP_BACKEND_URL, // Base URL for all requests
+    timeout: 10000, // Request timeout (in milliseconds)
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${auth?.token}`, // Add any default headers you need
+    },
+  });
+  const API = new api(apiClient);
+
   return (
     <div className="flex-column pt-20 gap-4 d-flex justify-content-center">
       <h1>My Collections</h1>
@@ -17,33 +41,13 @@ const Collections = () => {
         <Col lg={3} md={4} sm={12}>
           <NewCardItem />
         </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
-        <Col lg={3} md={4} sm={12}>
-          <CardItem {...myCollection} />
-        </Col>
+        {collections?.map((collection) => {
+          return (
+            <Col lg={3} md={4} sm={12} key={collection.id}>
+              <CardItem {...collection} />
+            </Col>
+          );
+        })}
       </Row>
     </div>
   );
diff --git a/linguaphoto/api/collection.py b/linguaphoto/api/collection.py
index b41b619..3772511 100644
--- a/linguaphoto/api/collection.py
+++ b/linguaphoto/api/collection.py
@@ -3,6 +3,7 @@
 from typing import List
 
 from crud.collection import CollectionCrud
+from errors import NotAuthorizedError
 from fastapi import APIRouter, Depends
 from models import Collection
 from schemas.collection import CollectionCreateFragment, CollectionEditFragment
@@ -28,7 +29,19 @@ async def create(
         return new_collection
 
 
-@router.post("/get_collections", response_model=List[Collection])
+@router.get("/get_collection", response_model=Collection)
+async def getcollection(
+    id: str, user_id: str = Depends(get_current_user_id), collection_crud: CollectionCrud = Depends()
+) -> dict | None:
+    async with collection_crud:
+        collection = await collection_crud.get_collection(id)
+        print(collection)
+        if collection.user != user_id:
+            raise NotAuthorizedError
+        return collection
+
+
+@router.get("/get_collections", response_model=List[Collection])
 async def getcollections(
     user_id: str = Depends(get_current_user_id), collection_crud: CollectionCrud = Depends()
 ) -> List[Collection]:
@@ -45,6 +58,8 @@ async def editcollection(
 ) -> None:
     async with collection_crud:
         await collection_crud.edit_collection(
-            collection.id, user_id=user_id, updates={"title": collection.title, "description": collection.description}
+            collection.id,
+            user_id=user_id,
+            updates={"title": collection.title, "description": collection.description, "images": collection.images},
         )
         return
diff --git a/linguaphoto/crud/collection.py b/linguaphoto/crud/collection.py
index 85e6fa2..9d44012 100644
--- a/linguaphoto/crud/collection.py
+++ b/linguaphoto/crud/collection.py
@@ -12,6 +12,10 @@ async def create_collection(self, user_id: str, title: str, description: str) ->
         await self._add_item(collection)
         return collection
 
+    async def get_collection(self, collection_id: str) -> Collection:
+        collection = await self._get_item(collection_id, Collection, True)
+        return collection
+
     async def get_collections(self, user_id: str) -> List[Collection]:
         collections = await self._get_items_from_secondary_index("user", user_id, Collection)
         return collections
diff --git a/linguaphoto/schemas/collection.py b/linguaphoto/schemas/collection.py
index 1dfa20d..897b3b3 100644
--- a/linguaphoto/schemas/collection.py
+++ b/linguaphoto/schemas/collection.py
@@ -1,5 +1,7 @@
 """Collection schemas for validating and API integration."""
 
+from typing import List, Optional
+
 from pydantic import BaseModel
 
 
@@ -10,5 +12,6 @@ class CollectionCreateFragment(BaseModel):
 
 class CollectionEditFragment(BaseModel):
     id: str
-    title: str
-    description: str
+    title: Optional[str]
+    description: Optional[str]
+    images: Optional[List[str]]