diff --git a/fonts/SF-Pro-Italic.ttf b/fonts/SF-Pro-Italic.ttf
new file mode 100644
index 0000000..911643c
Binary files /dev/null and b/fonts/SF-Pro-Italic.ttf differ
diff --git a/fonts/SF-Pro.ttf b/fonts/SF-Pro.ttf
new file mode 100644
index 0000000..4f88dc1
Binary files /dev/null and b/fonts/SF-Pro.ttf differ
diff --git a/index.html b/index.html
index ed64dbd..c88b7d1 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,8 @@
 			<h1>Mabulig Web</h1>
 		</div>
     <div id="info">
-      <h2 id="recordnumbertext">Record Number</h2>
-			<h1 id="nametext"> Scientific Name</h1>
+      <h4 id="recordnumbertext">Record Number</h4>
+			<h2 id="nametext">Scientific Name</h2>
 		</div>
     <script type="module" src="main.js"></script>
   </body>
diff --git a/main.css b/main.css
index ae7837b..37edc54 100644
--- a/main.css
+++ b/main.css
@@ -1,9 +1,26 @@
 @font-face {
-    font-family: "Blender Pro Book";
-    src: url("fonts/BlenderPro-Bold.woff2") format("woff2"),
-        url("fonts/BlenderPro-Bold.woff") format("woff");
+    font-family: "SF Pro Medium";
+    src: url("fonts/SF-Pro.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
 }
 
+@font-face {
+    font-family: "SF Pro Medium";
+    src: url("fonts/SF-Pro-Italic.ttf") format("truetype");
+	font-weight: normal;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+    font-family: "Blender Pro Bold";
+    src: url("fonts/BlenderPro-Bold.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
 
 #info {
 	position: absolute;
@@ -18,7 +35,7 @@
 	user-select: none;
 	pointer-events: none;
 	z-index: 1; /* TODO Solve this in HTML */
-    font-family: 'Blender Pro Book';
+    font-family: 'SF Pro Medium';
     font-weight: normal;
     font-style: normal;
 
@@ -37,7 +54,7 @@
 	user-select: none;
 	pointer-events: none;
 	z-index: 1; /* TODO Solve this in HTML */
-    font-family: 'Blender Pro Book';
+    font-family: 'Blender Pro Bold';
     font-weight: normal;
     font-style: normal;
 
@@ -45,10 +62,12 @@
 
 h1 {
     margin: 5px;
+	/* font-weight: normal !important; */
 }
 h2 {
     margin: 0px;
+	font-weight: normal !important;
 }
-h3 {
+h4 {
     margin: 0px;
-}
\ No newline at end of file
+}
diff --git a/main.js b/main.js
index 96bdd67..23ced7e 100644
--- a/main.js
+++ b/main.js
@@ -81,6 +81,7 @@ const params = {
     selectedModel: modelPaths['[MBS-2351] Ansonia muelleri'] // default selected option
 };
 
+// UPDATE NAME FUNCTION
 function updateNameText(name) {
     const recordtitleElement = document.getElementById('recordnumbertext');
     const titleElement = document.getElementById('nametext');
@@ -94,10 +95,11 @@ function updateNameText(name) {
     const trimmedstart = name.slice(16);
     const trimmedsciname = trimmedstart.slice(0, -4);
     titleElement.textContent = trimmedsciname;
+    titleElement.style.fontStyle = "italic"; //italicize scientific name
 }
 
 
-// LOADING FUNCTION
+// LOAD MODEL FUNCTION
 function loadNewModel(url) {
     if (currentModel) {
         scene.remove(currentModel);
diff --git a/model-index.json b/model-index.json
new file mode 100644
index 0000000..aa74c15
--- /dev/null
+++ b/model-index.json
@@ -0,0 +1,10 @@
+[
+  {
+    "name": "[MBS-2351] Ansonia muelleri",
+    "variants": {
+      "posed": "models/MBS-2351 Ansonia muelleri.glb",
+      "expanded dorsal": "models/MBS-2351 Ansonia muelleri.glb",
+      "expanded ventral": "models/MBS-2351 Ansonia muelleri.glb"
+    }
+  }
+]