diff --git a/src/App/App.css b/src/App/App.css
index ea26d52b34316c57fb422e48b1eee06b46657e76..bf26e75ad60825509b938db4adc2bef8ad5dc51f 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -336,14 +336,31 @@ td, th {
   padding: 8px;
 }
 
-tr:nth-child(even) {
+.min-w-full{
+  min-width: 100% !important;
+}
+
+.parttable thead tr td:nth-child(4){ /* length */
+  max-width: 40px !important;
+}
+.parttable thead tr td:nth-child(5){ /* type */
+  max-width: 40px !important;
+}
+.parttable thead tr td:nth-child(2){ /* code */
+  max-width: 60px !important;
+}
+.parttable thead tr td:nth-child(1){ /* name */
+  max-width: 60px !important;
+}
+
+tbody tr:nth-child(even) {
   background-color: #ededed;
 }
-tr:nth-child(odd) {
+tbody tr:nth-child(odd) {
   background-color: #f3f3f3;
 }
-tr:nth-child(1) {
-  background-color: var(--accent-gradient-one-of-three) !important;
+tbody tr:nth-child(1) {
+  background-color: var(--darkerbeige) ;
 }
 
 
@@ -376,6 +393,7 @@ margin-bottom: 10vw !important;
 }
 .bg-d{
   background-color: var(--text-primary) !important;
+  color: white;
 }
 .bg-l{
   background-color: var(--text-primary) !important;
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 495217585b719c570839d207da2391b8629f874f..ee88868bdba213cb83db7e9bc515339268c4ab23 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,6 +1,6 @@
 import { Part } from "../data/parts";
 
-export function PartTable(data: Array<Part>, cols: Array<string>){
+export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}){
     let list = [];
     for (let index = 0; index < data.length; index++) {
         list.push(
@@ -15,15 +15,15 @@ export function PartTable(data: Array<Part>, cols: Array<string>){
     }
     let heads = []; 
     for (let index = 0; index < cols.length; index++) {
-        heads.push(<td>cols[index]</td>)
+        heads.push(<td><b>{cols[index]}</b></td>)
     }
     return(
         <div className="flex flex-col">
-     <div className="overflow-x-auto sm:-mx-6 lg:-mx-8">
-       <div className="inline-block min-w-full py-4 sm:px-6 lg:px-8">
+     <div className="min-w-full overflow-x-auto">
+       <div className="inline-block min-w-full py-4">
          <div className="overflow-hidden p-2">
-           <table className="min-w-full text-center">
-             <thead className="border-b bg-gray-50">
+           <table className="text-center parttable">
+             <thead className="bg-d">
                 <tr>
                     {heads}
                 </tr>
diff --git a/src/contents/parts.tsx b/src/contents/parts.tsx
index 8707ab369a0d1c21fbc34ac2056c8894df8de0c6..efa8ac6d809cd13fedc6fbfbebca2c933f812e77 100644
--- a/src/contents/parts.tsx
+++ b/src/contents/parts.tsx
@@ -1,9 +1,12 @@
 import { LoremMedium } from "../components/Loremipsum";
 import { Section, Subesction } from "../components/sections";
+import { PartTable } from "../components/Table";
 import { useTabNavigation } from "../utils/TabNavigation";
+import { BasicParts, CompositeParts } from "../data/parts";
 
 export function Parts() {
   useTabNavigation();
+  let headcols = ["Part Name", "Registry Code", "Part Description", "length [bp]", "type"]
     return (
       <div className="col">
         <Section title="Introduction" id="Introduction">
@@ -38,7 +41,7 @@ export function Parts() {
             <LoremMedium/>
           </Subesction>
           <Subesction title="Basic Parts" id="Parts Collection2">
-            <LoremMedium/>
+            <PartTable cols={headcols} data={BasicParts}/>
           </Subesction>
           <Subesction title="Composite Parts" id="Parts Collection3">
             <LoremMedium/>