diff --git a/README.md b/README.md
index e5f48c7..23d4d50 100644
--- a/README.md
+++ b/README.md
@@ -214,7 +214,7 @@ Here is a part of an example STA report: (Your report must have a similar format
 
     git clone https://github.com/kanndil/interactive_SVG_schematics.git
 
-### Second: Add Generate Skin-File
+### Second: Generate Skin-File
 
 <details>
   <summary>Check these pre-generated skin-files</summary>
diff --git a/skinFiles/gf180mcu_fd_sc_mcu7t5v0__tt_025C_5v00_representations/default.svg b/skinFiles/gf180mcu_fd_sc_mcu7t5v0__tt_025C_5v00_representations/default.svg
index 9108d6b..5e42404 100644
--- a/skinFiles/gf180mcu_fd_sc_mcu7t5v0__tt_025C_5v00_representations/default.svg
+++ b/skinFiles/gf180mcu_fd_sc_mcu7t5v0__tt_025C_5v00_representations/default.svg
@@ -2804,6 +2804,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnq_1"/>
 
@@ -2837,6 +2839,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnq_2"/>
 
@@ -2870,6 +2874,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnq_4"/>
 
@@ -2903,6 +2909,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnrnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnrnq_1"/>
 
@@ -2936,6 +2944,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnrnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnrnq_2"/>
 
@@ -2969,6 +2979,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnrnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnrnq_4"/>
 
@@ -3002,6 +3014,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnrsnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnrsnq_1"/>
 
@@ -3035,6 +3049,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnrsnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnrsnq_2"/>
 
@@ -3068,6 +3084,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnrsnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnrsnq_4"/>
 
@@ -3101,6 +3119,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnsnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnsnq_1"/>
 
@@ -3134,6 +3154,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnsnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnsnq_2"/>
 
@@ -3167,6 +3189,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffnsnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffnsnq_4"/>
 
@@ -3200,6 +3224,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffq_1"/>
 
@@ -3233,6 +3259,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffq_2"/>
 
@@ -3266,6 +3294,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffq_4"/>
 
@@ -3299,6 +3329,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffrnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffrnq_1"/>
 
@@ -3332,6 +3364,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffrnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffrnq_2"/>
 
@@ -3365,6 +3399,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffrnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffrnq_4"/>
 
@@ -3398,6 +3434,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffrsnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffrsnq_1"/>
 
@@ -3431,6 +3469,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffrsnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffrsnq_2"/>
 
@@ -3464,6 +3504,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffrsnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffrsnq_4"/>
 
@@ -3497,6 +3539,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffsnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffsnq_1"/>
 
@@ -3530,6 +3574,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffsnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffsnq_2"/>
 
@@ -3563,6 +3609,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__dffsnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__dffsnq_4"/>
 
@@ -3596,6 +3644,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffq_1"/>
 
@@ -3629,6 +3679,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffq_2"/>
 
@@ -3662,6 +3714,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffq_4"/>
 
@@ -3695,6 +3749,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffrnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffrnq_1"/>
 
@@ -3728,6 +3784,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffrnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffrnq_2"/>
 
@@ -3761,6 +3819,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffrnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffrnq_4"/>
 
@@ -3794,6 +3854,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffrsnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffrsnq_1"/>
 
@@ -3827,6 +3889,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffrsnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffrsnq_2"/>
 
@@ -3860,6 +3924,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffrsnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffrsnq_4"/>
 
@@ -3893,6 +3959,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffsnq_1" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffsnq_1"/>
 
@@ -3926,6 +3994,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffsnq_2" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffsnq_2"/>
 
@@ -3959,6 +4029,8 @@ text {
 <!-- /////////////////////////////////////////////////////////////////////////////////////////-->
   <!-- flipflop -->
   <g s:type="gf180mcu_fd_sc_mcu7t5v0__sdffsnq_4" onClick="reply_click(this.id)"  transform="translate(100,1600)" s:width="40" s:height="60">
+    <g id="flipflop"></g>
+
 
     <s:alias val="gf180mcu_fd_sc_mcu7t5v0__sdffsnq_4"/>
 
diff --git a/style.html b/style.html
new file mode 100644
index 0000000..d5547e5
--- /dev/null
+++ b/style.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  font-family: "Lato", sans-serif;
+}
+
+.sidenav {
+  height: 100%;
+  width: 160px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 18px;
+  color: #818181;
+  display: block;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+.main {
+  margin-left: 160px; /* Same as the width of the sidenav */
+  font-size: 28px; /* Increased text to enable scrolling */
+  padding: 0px 10px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+</style>
+</head>
+<body>
+
+<div class="main">
+
+<h2>Interactive SVG Schematics</h2>
+
+    
+</div>
+   
+</body>
+</html> 
\ No newline at end of file