diff --git a/packages/front-end/components/AppHeader.vue b/packages/front-end/components/AppHeader.vue
index ce62762..49239c2 100644
--- a/packages/front-end/components/AppHeader.vue
+++ b/packages/front-end/components/AppHeader.vue
@@ -53,7 +53,7 @@
             >
               <NuxtLink to="/contact">Contact</NuxtLink>
             </li>
-            <li
+            <!-- <li
               class="nav-link text-white uppercase [item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']"
             >
               <NuxtLink to="/login">Sign IN</NuxtLink>
@@ -62,7 +62,7 @@
               class="btn-register text-white uppercase [item.current ? 'bg-gray-900 text-white' : 'text-gray-300', 'block rounded-md px-3 py-2 text-base font-medium']"
             >
               <NuxtLink to="/register">Register</NuxtLink>
-            </li>
+            </li> -->
           </div>
         </ul>
       </Disclosure>
diff --git a/packages/front-end/components/RelatedItems.vue b/packages/front-end/components/RelatedItems.vue
index 91f6cb8..29c617e 100644
--- a/packages/front-end/components/RelatedItems.vue
+++ b/packages/front-end/components/RelatedItems.vue
@@ -4,7 +4,7 @@
     <div class="related-product-wrap">
       <NuxtLink
         :to="`/products/${related_product.id}`"
-        class="center m-6"
+        class="related-okh center mt-6"
         v-for="related_product in related_products"
         :key="related_product.id"
         :product="related_product"
@@ -66,9 +66,14 @@ const related_products = [
   margin-bottom: 40px;
 
   .name {
+    color: #2A3952;
     font-size: 16px;
   }
 
+  .related-okh {
+    margin: 20px 5px;
+  }
+
   .title {
     color: #2a3952;
     font-size: 24px;
diff --git a/packages/front-end/pages/login.vue b/packages/front-end/pages/login.vue
index 5e6b0ab..a55ef0f 100644
--- a/packages/front-end/pages/login.vue
+++ b/packages/front-end/pages/login.vue
@@ -1,14 +1,91 @@
 <template>
-    <section>
-        <h1 class="login text-2xl font-bold tracking-tight text-red-900">Sign In</h1>
-    </section>
-  </template>
+  <section class="login">
+    <div class="container form">
+      <h1 class="title text-2xl font-bold tracking-tight">Sign In</h1>
+      <div class=" mb-3">
+        <label for="uname" class="pr-2 font-semibold">Username :</label>
+        <input
+          v-model="user.username"
+          type="text"
+          name="uname"
+          id="uname"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Username"
+          required
+        />
+      </div>
 
+      <div class=" mb-3">
+        <label for="psw" class="pr-2 font-semibold">Password :</label>
+        <input
+          v-model="user.password"
+          type="password"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Password"
+          name="psw"
+          required
+        />
+      </div>
 
+      <div class="link">Forgot password?</div>
 
+      <button
+        @click.prevent="login"
+        class="btn-login block rounded-md px-5 py-2 my-4 text-base font-medium"
+      >
+        Login
+      </button>
 
-  <style>
-  .login {
-    margin: 150px;
+      <div class="link">Don't have an account? <NuxtLink to="/register">Create an account</NuxtLink></div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+const user = ref({
+  username: "",
+  password: "",
+});
+
+const login = async () => {
+  // TODO send user Data to the login endpoint and redirect if  successful
+};
+</script>
+
+<style>
+.login {
+  margin: 150px;
+  place-self: center;
+
+  .btn-login {
+    background-color: #2a3952;
+    border-radius: 6px;
+    color: white;
+    font-size: 14px;
+    font-weight: 700;
+    width: 100%;
+  }
+
+  .container {
+    background-color: white;
+    border-radius: 6px;
+    padding: 30px 20px;
+    width: 450px;
+
+    label {
+      width: 120px;
+    }
+
+    .link {
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+
+  .title {
+    color: #2a3952;
+    margin-bottom: 20px;
+    text-transform: uppercase;
   }
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/packages/front-end/pages/products/[id].vue b/packages/front-end/pages/products/[id].vue
index 81ec9c1..8b14dd0 100644
--- a/packages/front-end/pages/products/[id].vue
+++ b/packages/front-end/pages/products/[id].vue
@@ -1,14 +1,73 @@
 <template>
   <div class="product-detail container center m-10">
     <div class="left">
-      <Slider :images="product.images" />
-      <div>Specifications</div>
-      <div>Detail</div>
+      <Slider :images="product?.image" />
+      <div class="specification">Specifications</div>
+      <div class="okh-details">
+        <div>version</div>
+        <div class="value">{{ product?.version }}</div>
+      </div>
+      <div class="okh-details">
+        <div>License</div>
+        <div class="value">{{ product?.license }}</div>
+      </div>
+      <div class="okh-details">
+        <div>Licensor</div>
+        <div class="value">
+          <div>{{ product?.licensor.name }}</div>
+          <div>{{ product?.licensor.email }}</div>
+          <div>{{ product?.licensor.affiliation }}</div>
+        </div>
+      </div>
+      <div class="okh-details">
+        <div>manifest author</div>
+        <div class="value">
+          <div>{{ product["manifest-author"].name }}</div>
+          <div>{{ product["manifest-author"].email }}</div>
+          <div>{{ product["manifest-author"].affiliation }}</div>
+        </div>
+      </div>
+      <div class="okh-details">
+        <div>manifest language</div>
+        <div class="value">{{ product["manifest-language"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>okh manifest version</div>
+        <div class="value">{{ product["okh-manifest-version"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>date created</div>
+        <div class="value">{{ product["date-created"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>date updated</div>
+        <div class="value">{{ product["date-updated"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>keywords</div>
+        <div class="value">{{ product?.keywords?.join(', ') }}</div>
+      </div>
+      <div class="okh-details">
+        <div>contact</div>
+        <div class="value">
+          <div>{{ product.contact.name }}</div>
+          <div>{{ product.contact.email }}</div>
+          <div>{{ product.contact.affiliation }}</div>
+        </div>
+      </div>
+      <div class="okh-details">
+        <div>development stage</div>
+        <div class="value">{{ product["development-stage"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>health safety notice</div>
+        <div class="value">{{ product["health-safety-notice"] }}</div>
+      </div>
     </div>
     <div class="center">
-      <h1 class="title">{{ product.name }}</h1>
+      <h1 class="title">{{ product?.title }}</h1>
       <div class="location">Location, Country</div>
-      <p>{{ product.shortDescription }}</p>
+      <p>{{ product?.description }}</p>
       <div class="review-wrap">
         <Reviews />
         <Reviews />
@@ -23,121 +82,726 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useRoute } from "#app";
+import type { OKH_TYPE } from "../../types/OKH.type";
 
 const route = useRoute();
-const productId = route.params.id;
+const productId = route.params.id as string;
 
 // Mock product data
-const products = [
+const products: OKH_TYPE[] = [
   {
     id: 1,
-    name: "IV Bag Hook",
-    images:["https://field-ready-projects.openknowhow.org/images/HL003-attC88mXadLwq4sLy-400x300.jpg",
+    title: "IV Bag Hook",
+    description: "For IV bags to be hung. Lorem ipsum dolor sit amet consectetur. Quis risus enim aliquam feugiat aliquam vulputate placerat sed. Consectetur pellentesque dis nunc sit et odio non viverra. Facilisi vitae sed in massa nibh elit. Bibendum massa nunc lorem mattis bibendum malesuada ac magna lorem. Morbi in a faucibus cum diam aliquam mi faucibus. Dapibus id maecenas aliquet quis arcu tempor nisi risus.",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL003-attC88mXadLwq4sLy-400x300.jpg",
       "https://field-ready-projects.openknowhow.org/images/HL003-attnOADswJg8Z1Tkr-400x300.jpg",
-      "https://field-ready-projects.openknowhow.org/images/HL003-attTWOBTURxhJke0d-400x300.jpg"
+      "https://field-ready-projects.openknowhow.org/images/HL003-attTWOBTURxhJke0d-400x300.jpg",
     ],
-    shortDescription: "For IV bags to be hung",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: "2.0",
+    "development-stage": "Production",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 2,
-    name: "Oxygen Supply Fitting",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/HL002-attmlR243asYolZRO-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL002-attEl2ohzRMv9ARYL-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL002-att6KspJ44bsDBbTY-400x300.jpg"
-      ],
-    shortDescription:
+    title: "Oxygen Supply Fitting",
+    description:
       "Adapter that connects oxygen supply tubing to standard oxygen systems",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL002-attmlR243asYolZRO-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL002-attEl2ohzRMv9ARYL-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL002-att6KspJ44bsDBbTY-400x300.jpg",
+    ],
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 3,
-    name: "Umbilical Cord Clamp",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/HL001-attG43ftDEHSUFPVG-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL001-attf3p6aS1A0NgjXH-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL001-attQY27dM3l2ON5Ao-400x300.jpg"
-      ],
-    shortDescription:
-      "Enclosure of umbilical cords of newborns to prevent sepsis",
+    title: "Umbilical Cord Clamp",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL001-attG43ftDEHSUFPVG-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL001-attf3p6aS1A0NgjXH-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL001-attQY27dM3l2ON5Ao-400x300.jpg",
+    ],
+    description: "Enclosure of umbilical cords of newborns to prevent sepsis",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 4,
-    name: "Finger Brace",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/HL005-attgxsUzHxoTnTmSP-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL005-att5gRPVVqNrEdNzQ-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL005-att7KSVbxiaJwycvm-400x300.jpg"
-      ],
-    shortDescription: "In order to keep a injured index finger immobile",
+    title: "Finger Brace",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL005-attgxsUzHxoTnTmSP-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL005-att5gRPVVqNrEdNzQ-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL005-att7KSVbxiaJwycvm-400x300.jpg",
+    ],
+    description: "In order to keep a injured index finger immobile",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 5,
-    name: "Water Truck Clamp",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA012-attbQe9vW0QdVGkqD-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/WA012-attOlLPPqg7ONAQBC-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/WA012-attr7TkuBVgBqtkoP-400x300.jpg"
-      ],
-    shortDescription:
+    title: "Water Truck Clamp",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA012-attbQe9vW0QdVGkqD-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/WA012-attOlLPPqg7ONAQBC-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/WA012-attr7TkuBVgBqtkoP-400x300.jpg",
+    ],
+    description:
       "Clamps over the hose on the outlet of a water distribution truck to create a seal",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 6,
-    name: "Jerry Can Roller",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA013-attjDSod18c5Ru8PN-400x300.jpeg"],
-    shortDescription: "Transports 80 litres of drinking water",
+    title: "Jerry Can Roller",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA013-attjDSod18c5Ru8PN-400x300.jpeg",
+    ],
+    description: "Transports 80 litres of drinking water",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 7,
-    name: "Make-Fit Pipe Fitting",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA016-attP4Uy56ROfYjAjF-400x300.jpg"],
-    shortDescription:
+    title: "Make-Fit Pipe Fitting",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA016-attP4Uy56ROfYjAjF-400x300.jpg",
+    ],
+    description:
       "Using Make-Fit app a range of 3DP pipe fitting can be produced",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 8,
-    name: "Straight Coupler",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA010-attuWhYn15CARwJu4-400x300.jpg"],
-    shortDescription: "20.5/16.5 straight coupler used to join to pipes.",
+    title: "Straight Coupler",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA010-attuWhYn15CARwJu4-400x300.jpg",
+    ],
+    description: "20.5/16.5 straight coupler used to join to pipes.",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 9,
-    name: "Baby Crib",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/CP002-attt4t66rFpYaqdTj-400x300.jpeg"],
-    shortDescription: "Provides a safe area for a baby to sleep",
+    title: "Baby Crib",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/CP002-attt4t66rFpYaqdTj-400x300.jpeg",
+    ],
+    description: "Provides a safe area for a baby to sleep",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 10,
-    name: "Play Pen",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/CP003-attz3CoRAhIzA5x9v-400x300.jpeg"],
-    shortDescription: "Provides a safe area for a child to play",
+    title: "Play Pen",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/CP003-attz3CoRAhIzA5x9v-400x300.jpeg",
+    ],
+    description: "Provides a safe area for a child to play",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 11,
-    name: "Duoband Yagi Antenna",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/DR002-attJBcwM43eItgWAE-400x300.jpg"],
-    shortDescription:
+    title: "Duoband Yagi Antenna",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/DR002-attJBcwM43eItgWAE-400x300.jpg",
+    ],
+    description:
       "3D printed bespoke parts to construct standard antenna design",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 12,
-    name: "Rescue Airbag",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/DR001-att5yL3AEAbc3wDh2-400x300.png"],
-    shortDescription: "For first responders to remove large blocks of debris",
+    title: "Rescue Airbag",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/DR001-att5yL3AEAbc3wDh2-400x300.png",
+    ],
+    description: "For first responders to remove large blocks of debris",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+   "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   // Add more products here
 ];
 
 const product = products.find((p) => p.id === parseInt(productId));
+
+// const baseUrl = useRuntimeConfig().public.baseUrl;
+// const url = baseUrl + "/getOKH/"+ productId;
+// console.log("url",url);
+// const loading = "loading";
+// const success = "success";
+// console.log("url", url);
+// const { data: product, status, error, refresh, clear } = await useFetch(url);
+// console.log("product",product);
 </script>
 
 <style scoped>
@@ -169,6 +833,31 @@ const product = products.find((p) => p.id === parseInt(productId));
 
   .left {
     width: 300px;
+
+    .okh-details {
+      display: flex;
+      font-weight: 500;
+      justify-content: space-between;
+      padding: 8px 4px;
+
+      .value {
+        color: #2a3952;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: right;
+      }
+
+      &:nth-child(even) {
+        background-color: #ebebeb;
+      }
+    }
+
+    .specification {
+      color: #2a3952;
+      font-size: 18px;
+      font-weight: 700;
+      margin: 30px 0 5px 0;
+    }
   }
 
   .location {
@@ -176,13 +865,13 @@ const product = products.find((p) => p.id === parseInt(productId));
   }
 
   .center {
-    width: calc(100% - 500px);
+    width: calc(100% - 600px);
   }
 
   .review-wrap {
     display: flex;
     justify-content: space-between;
-    margin: 20px 0;
+    margin: 40px 0 20px 0;
   }
 
   .right {
@@ -198,4 +887,12 @@ const product = products.find((p) => p.id === parseInt(productId));
     font-weight: 700;
   }
 }
+
+@media only screen and (min-width: 1536px) {
+  .product-detail {
+    &.container {
+      max-width: 1400px;
+    }
+  }
+}
 </style>
diff --git a/packages/front-end/pages/register.vue b/packages/front-end/pages/register.vue
index 617882b..c9b8e0f 100644
--- a/packages/front-end/pages/register.vue
+++ b/packages/front-end/pages/register.vue
@@ -1,13 +1,112 @@
 <template>
-  <section>
-    <h1 class="register-text text-2xl font-bold tracking-tight text-red-900">
-      Register
-    </h1>
+  <section class="register">
+    <div class="container form">
+      <h1 class="title text-2xl font-bold tracking-tight">Register</h1>
+      <div class=" mb-3">
+        <label for="uname" class="pr-2 font-semibold">Username :</label>
+        <input
+          v-model="user.username"
+          type="text"
+          name="uname"
+          id="uname"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Username"
+          required
+        />
+      </div>
+
+      <div class="mb-3">
+        <label for="uname" class="pr-2 font-semibold">Email :</label>
+        <input
+          v-model="user.email"
+          type="text"
+          name="email"
+          id="email"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Email"
+          required
+        />
+      </div>
+
+      <div class="mb-3">
+        <label for="psw" class="pr-2 font-semibold">Password :</label>
+        <input
+          v-model="user.password"
+          type="password"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Password"
+          name="psw"
+          required
+        />
+      </div>
+
+      <div class="flex justify-self-end">
+        <button
+        @click.prevent="login"
+        class="btn-login block rounded-md px-5 py-2 mt-4 mr-3 text-base font-medium"
+      >
+        Cancel
+      </button>
+
+      <button
+        @click.prevent="login"
+        class="btn-login block rounded-md px-5 py-2 mt-4 text-base font-medium"
+      >
+        Sign up
+      </button>
+      </div>
+      <div class="link"><NuxtLink to="/login">Already have an account? </NuxtLink></div>
+    </div>
   </section>
 </template>
 
+
+<script lang="ts" setup>
+const user = ref({
+  username: "",
+  password: "",
+  email: "",
+});
+
+const login = async () => {
+  // TODO send user Data to the login endpoint and redirect if  successful
+};
+</script>
+
+
 <style>
-.register-text {
+.register {
   margin: 150px;
+  place-self: center;
+
+  .btn-login {
+    background-color: #2a3952;
+    border-radius: 6px;
+    color: white;
+    font-size: 14px;
+    font-weight: 700;
+  }   
+
+  .container {
+    background-color: white;
+    border-radius: 6px;
+    padding: 30px 20px;
+    width: 450px;
+
+    label {
+      width: 120px;
+    }
+
+    .link {
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+
+  .title {
+    color: #2a3952;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+  }
 }
 </style>
diff --git a/packages/front-end/types/OKH.type.ts b/packages/front-end/types/OKH.type.ts
index f4fd18a..2e79439 100644
--- a/packages/front-end/types/OKH.type.ts
+++ b/packages/front-end/types/OKH.type.ts
@@ -10,12 +10,13 @@ import {
 import { type ATOM_TYPE } from "./ATOM.type";
 
 export type OKH_TYPE = {
+  id: number;
   title: string;
   description: string;
   "intended-use": string;
   keywords?: string[];
   "project-link": string;
-  image: string;
+  image: string | string[] | null;
   made: boolean;
   "made-independently": boolean;
   license: