diff --git a/public/index.css b/public/index.css
index 04f4a81..32296fc 100644
--- a/public/index.css
+++ b/public/index.css
@@ -16,6 +16,7 @@ div.resize {
 }
 td {
   padding: 0;
+  padding-left: 2px;
   margin: 0px;
   align: top;
 }
@@ -24,13 +25,12 @@ input.fill {
 }
 div.name {
   float:left;
-  margin-left: 2px;
   margin-right: 5px;
 }
 div.justify {
   overflow: hidden;
 }
-input.justify {
+.full {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
diff --git a/public/index.html b/public/index.html
index 92ac846..8e05894 100644
--- a/public/index.html
+++ b/public/index.html
@@ -21,8 +21,15 @@
       </td>
       <td class="right">
         <div class="resize">
-          <div class="name">name:</div><div class="justify"><input class="justify" type="text" id="part_name"></div>
-          <div class="name">description:</div><div class="justify"><input class="justify" type="text" id="part_description"></div>
+          <div class="name">name:</div><div class="justify"><input class="full" type="text" id="part_name"></div>
+          <div class="name">description:</div><div class="justify"><input class="full" type="text" id="part_description"></div>
+          <div>details:</div>
+          <div class="justify"><textarea class="full" id="part_details" rows="4"></textarea></div>
+          <div>package: <input type="text" id="part_package" size="4">-<input type="text" id="part_pincount" size="2"></div>
+          <div class="name">manufacturer:</div><div class="justify"><input class="full" type="text" id="part_manufacturer"></div>
+          <div class="name">family:</div><div class="justify"><input class="full" type="text" id="part_family"></div>
+          <div class="name"><a id="url_datasheet">datasheet</a>:</div><div class="justify"><input class="full" type="text" id="part_datasheet"></div>
+          <div class="name"><a id="url_page">page</a>:</div><div class="justify"><input class="full" type="text" id="part_page"></div>
         </div>
       </td>
     </tr>
diff --git a/public/partdb.js b/public/partdb.js
index b3cc495..d1f5ef1 100644
--- a/public/partdb.js
+++ b/public/partdb.js
@@ -43,16 +43,41 @@ function results()
 function select()
 {
 	const results = document.getElementById('results');
-	const variants_select = document.getElementById('variants');
-	const pinout_preview = document.getElementById('pinout_preview');
 	if (results.selectedIndex >= 0) {
 		let part_selected = parseInt(results.options[results.selectedIndex].value);
 		for (const part of parts) {
 			if (part.id == part_selected) {
-				const fields = ["name", "description"];
+				console.log(part);
+				// populate part fields
+				const fields = ["name", "description", "details", "package", "pincount", "manufacturer", "family", "datasheet", "page"];
 				for (const field of fields) {
 					const input = document.getElementById('part_' + field);
-					input.value = part[field];
+					if (input.tagName == "INPUT") {
+						if (undefined === part[field]) {
+							input.value = "";
+						} else {
+							input.value = part[field];
+						}
+					} else if (input.tagName == "TEXTAREA") {
+						if (undefined === part[field]) {
+							input.innerHtml = null;
+						} else {
+							input.innerHtml = part[field];
+						}
+					}
+				}
+				// set URLs
+				const urls = ["page","datasheet"];
+				for (const field of urls) {
+					const a = document.getElementById('url_' + field);
+					if (null == a) {
+						continue;
+					}
+					if (undefined === part[field]) {
+						a.href = null;
+					} else {
+						a.href = part[field];
+					}
 				}
 			}
 		}
diff --git a/server.rb b/server.rb
index 1c54929..0cbb959 100755
--- a/server.rb
+++ b/server.rb
@@ -63,20 +63,21 @@ get '/' do
 end
 
 def get_part_by_id(id)
-  statement = @db.prepare("SELECT part.id, part.name, part.description, part.datasheet, manufacturer.name AS manufacturer, package.name AS package, part.pincount AS pincount, part.page AS page, part.family AS family FROM part LEFT JOIN package ON package.id = part.package LEFT JOIN manufacturer ON manufacturer.id = part.manufacturer WHERE part.id = ?")
+  statement = @db.prepare("SELECT part.id, part.name, part.description, part.datasheet, manufacturer.name AS manufacturer, package.name AS package, part.pincount AS pincount, part.page AS page, part.family AS parent FROM part LEFT JOIN package ON package.id = part.package LEFT JOIN manufacturer ON manufacturer.id = part.manufacturer WHERE part.id = ?")
   part = statement.execute(id, :as => :hash).to_a[0]
   return nil unless part
   # merge with family info
-  while part and part["family"] do
-    family = statement.execute(part["family"]).to_a[0]
-    part["family"] = nil # reset info
+  while part and part["parent"] do
+    family = statement.execute(part["parent"]).to_a[0]
+    part["parent"] = nil # reset info
     break unless family
+    part["family"] ||= family["name"]
     family.each do |k,v|
       part[k] ||= v
     end
   end
   # clean up
-  delete = ["family"]
+  delete = ["parent"]
   delete.each do |k|
     part.delete k
   end