diff --git a/.DS_Store b/.DS_Store
index 063ff2c..5560d79 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index a00110c..ec70d34 100644
--- a/css/style.css
+++ b/css/style.css
@@ -187,6 +187,19 @@ section {
     color: rgb(255, 255, 255);
   }
 }
+@keyframes line90 {
+  0% {
+    width: 0;
+    color: rgba(255, 255, 255, 0);
+  }
+  40% {
+    color: rgb(255, 255, 255);
+  }
+  100% {
+    width: 90%;
+    color: rgb(255, 255, 255);
+  }
+}
 .animateLine {
   animation: line70 3S 1;
   animation: line75 3s 1;
@@ -196,7 +209,7 @@ section {
 
 .worksTitle {
   text-align: center;
-  margin-bottom: 20px;
+  margin: 1em;
 }
 
 .cardContainer {
@@ -285,19 +298,20 @@ section {
 }
 
 .cardContainer .box:nth-child(1) .icon {
-  background-image: url(../img/tandoori.jpg);
+  background-image: url(../img/sub-product.png);
+  background-color: white;
   background-position: top;
-  background-size: cover;
+  background-size: contain;
 }
 
 .cardContainer .box:nth-child(2) .icon {
-  background-image: url(../img/caucus.jpg);
+  background-image: url(../img/tandoori.jpg);
   background-position: top;
   background-size: cover;
 }
 
 .cardContainer .box:nth-child(3) .icon {
-  background-image: url(../img/mtruapehu.png);
+  background-image: url(../img/caucus.jpg);
   background-position: top;
   background-size: cover;
 }
@@ -332,6 +346,16 @@ section {
   background-size: cover;
 }
 
+.flexWrap {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.workPage {
+  margin-top: 6em;
+}
+
 .contactIntro {
   padding-bottom: 20px;
   border-bottom: solid 1px #cecece;
@@ -347,7 +371,7 @@ section {
 @media (max-width: 576px) {
   .contactIntro p {
     font-size: 50px;
-    padding-left: 10%;
+    padding: 5%;
   }
 }
 
diff --git a/css/style.css.map b/css/style.css.map
index 16c8b28..9d6c57a 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_base.scss","style.css","_skill.scss","_works.scss","_contact.scss","_mixin.scss","style.scss","_variables.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["_base.scss","style.css","_skill.scss","_works.scss","_contact.scss","_mixin.scss","style.scss","_variables.scss"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;ACCF;;ADEA;EACE,qCAAA;ACCF;;ADCA;EACE,iBAAA;EACA,cAAA;ACEF;;ADAA;EACE,gBAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;ACGF;;ADDA;EACE,WAAA;EACA,cAAA;EACA,WAAA;ACIF;;ADFA;EACE,WAAA;ACKF;;ADHA;EACE,aAAA;ACMF;;ADJA;EACA,aAAA;ACOA;;ADLA;EACA,UAAA;ACQA;;ADNA;EACA,aAAA;ACSA;;ADPA;EACA,aAAA;ACUA;;ADRA;EACE,UAAA;ACWF;;ADTA;EACA,aAAA;ACYA;;ADVA;EACA,aAAA;ACaA;;ADXA;EACA,UAAA;ACcA;;ADZA;EACE,aAAA;ACeF;;ADbA;EACE,YAAA;ACgBF;;ADbA;EACE,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,wBAAA;EACA,WAAA;EACA,aAAA;ACgBF;;ACpFA;EACE,yBAAA;EACA,eAAA;EACA,YAAA;EACA,wBAAA;EACA,aAAA;ADuFF;;ACrFA;EACE,gBAAA;ADwFF;ACvFE;EACE,iBAAA;EACA,cAAA;ADyFJ;;ACtFA;EACE,gBAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;ADyFF;;ACvFA;EACE,cAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;EACA,mBAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;AD0FF;;ACxFA;EACE,sBAAA;AD2FF;;ACxFA;EACE,sBAAA;AD2FF;;ACxFA;EACE,sBAAA;AD2FF;;ACxFA;EACE,sBAAA;AD2FF;;ACxFA;EACE;IAAI,QAAA;IAAS,6BAAA;ED6Fb;EC5FA;IAAK,yBAAA;ED+FL;EC9FA;IAAM,UAAA;IAAW,yBAAA;EDkGjB;AACF;ACjGA;EACE;IAAI,QAAA;IAAS,6BAAA;EDqGb;ECpGA;IAAK,yBAAA;EDuGL;ECtGA;IAAM,UAAA;IAAW,yBAAA;ED0GjB;AACF;ACzGA;EACE;IAAI,QAAA;IAAS,6BAAA;ED6Gb;EC5GA;IAAK,yBAAA;ED+GL;EC9GA;IAAM,UAAA;IAAW,yBAAA;EDkHjB;AACF;ACjHA;EACE;IAAI,QAAA;IAAS,6BAAA;EDqHb;ECpHA;IAAK,yBAAA;EDuHL;ECtHA;IAAM,UAAA;IAAW,yBAAA;ED0HjB;AACF;ACzHA;EACE;IAAI,QAAA;IAAS,6BAAA;ED6Hb;EC5HA;IAAK,yBAAA;ED+HL;EC9HA;IAAM,UAAA;IAAW,yBAAA;EDkIjB;AACF;AChIA;EACE,sBAAA;EACA,sBAAA;EACA,sBAAA;EACA,sBAAA;ADkIF;;AE/MA;EACA,kBAAA;EACA,WAAA;AFkNA;;AEhNA;EACE,kBAAA;EACA,aAAA;EAEA,iBAAA;EACA,gBAAA;AFkNF;AEhNE;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;EACA,iBAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;AFkNJ;AEjNI;EACE,kBAAA;EACA,0BAAA;EACA,UAAA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,UAAA;AFmNN;AElNM;EACE,qBAAA;AFoNR;AElNM;EACE,SAAA;EACA,UAAA;EACA,WAAA;EACA,eAAA;AFoNR;AElNM;EACE,SAAA;EACA,UAAA;EACA,WAAA;AFoNR;AEjNI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;AFmNN;AElNM;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,kBAAA;AFoNR;;AE/MA;EACI,SAAA;EACA,sBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AFkNJ;AEjNI;EACE,eAAA;EACA,mBAAA;AFmNN;;AEhNA;EACE,UAAA;EACA,UAAA;AFmNF;;AEjNA;EACE,mBAAA;AFoNF;;AElNA;EACE,mBAAA;AFqNF;;AEnNA;EACE,6CAAA;EACA,uBAAA;EACA,wBAAA;EAA6B,wBAAA;AFuN/B;;AErNA;EACE,0CAAA;EACA,wBAAA;EAA6B,sBAAA;AFyN/B;;AEvNA;EACE,wCAAA;EACA,wBAAA;EAA6B,sBAAA;AF2N/B;;AErNA;EACE,sCAAA;EACA,wBAAA;EAA6B,sBAAA;AFyN/B;;AEvNA;EACE,6CAAA;EACA,wBAAA;EAA6B,sBAAA;AF2N/B;;AEzNA;EACE,wCAAA;EACA,wBAAA;EAA6B,sBAAA;AF6N/B;;AE3NA;EACE,wCAAA;EACA,wBAAA;EAA6B,sBAAA;AF+N/B;;AE7NA;EACE,yCAAA;EACA,wBAAA;EAA6B,sBAAA;AFiO/B;;AE9NA;EACE,aAAA;EACA,eAAA;EACA,mBAAA;AFiOF;;AE9NA;EACE,eAAA;AFiOF;;AGpWA;EACE,oBAAA;EACA,gCAAA;EACA,YAAA;AHuWF;AGrWE;EACE,gBAAA;EACA,4BAAA;EACA,aAAA;EACA,eAAA;EACA,gBAAA;AHuWJ;AI/WI;EDGF;IAOI,eAAA;IACA,WAAA;EHyWJ;AACF;;AGtWA;EACE,sBAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;AHyWF;AGxWE;EACE,YAAA;EACA,aAAA;AH0WJ;AGzWI;EACE,eAAA;AH2WN;AGzWI;EACE,mBAAA;EACA,yBAAA;EACA,eAAA;AH2WN;AGzWI;EACE,qBAAA;EACA,YAAA;EACA,mBAAA;AH2WN;AI9YI;EDeJ;IAwBI,WAAA;IACA,sBAAA;IACA,aAAA;IACA,YAAA;EH2WF;AACF;;AKlZA;EACI,aAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,gBAAA;ALqZJ;;AKnZA;EACE,eAAA;EACA,WAAA;EACA,aAAA;EACA,8BAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,uBAAA;EACA,MAAA;ALsZF;AKrZE;EACE,aAAA;ALuZJ;AI7aI;ECqBF;IAGI,cAAA;IACA,gBAAA;IACA,gBAAA;IACA,iBAAA;ELyZJ;AACF;AKvZE;EACE,gBAAA;EACA,gBAAA;EACA,iBAAA;ALyZJ;AI1bI;EC8BF;IAKK,aAAA;EL2ZL;AACF;AK1ZE;EACE,kBAAA;AL4ZJ;AK3ZI;EACE,aAAA;AL6ZN;AK3ZI;EACE,gBAAA;EACA,aAAA;AL6ZN;AIzcI;EC0CA;IAII,sBAAA;IACA,aAAA;IACA,YAAA;IACA,yBClDA;IDmDA,aAAA;EL+ZN;AACF;AK7ZI;EACE,WAAA;EACA,aAAA;EACA,kBAAA;AL+ZN;AIvdI;ECqDA;IAKI,kCAAA;ELiaN;AACF;AKhaM;EACE,qBAAA;EACA,gBAAA;EACA,uCAAA;EACA,YAAA;ALkaR;AKjaQ;EACE,gCAAA;EACA,aAAA;ALmaV;AIteI;EC4DE;IAUI,YAAA;ELoaR;AACF;AKhaE;EACE,aAAA;ALkaJ;AI9eI;EC2EF;IAGI,kBAAA;IACA,iBAAA;IACA,YAAA;IACA,eAAA;IACA,UAAA;IACA,cAAA;IACA,yBCrFE;ENyfN;AACF;AIzfI;ECWJ;IA8EI,YAAA;IACA,mBC3FI;ID4FJ,sBAAA;IACA,UAAA;ELoaF;AACF;;AKjaA;EACE,sCAAA;EACA,2BAAA;EACA,4BAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ALoaF;AKnaE;EACE,UAAA;EACA,eAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;ALqaJ;AKpaI;EACE,aAAA;ALsaN;AKraM;EACE,gBAAA;EACA,kBAAA;ALuaR;AKtaQ;EACE,qBAAA;EACA,YAAA;ALwaV;AI7hBI;ECmHI;IAII,YAAA;EL0aV;AACF;AIliBI;EC8GA;IAcI,aAAA;IACA,uBAAA;IACA,WAAA;EL0aN;AACF;AIziBI;ECgGJ;IAmCI,sBAAA;IACA,yBCrII;EN+iBN;AACF;;AKxaA;EACE,gCAAA;AL2aF;;AKzaA;EACE,aAAA;EACA,uBAAA;AL4aF;;AK1aC;EACC,kBAAA;EACA,6BAAA;EACA,mBAAA;EACA,eAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;AL6aF;;AK3aA;EACE,UAAA;EACA,WAAA;AL8aF;AK7aE;EACE,eAAA;AL+aJ;AK7aE;EACE,eAAA;EACA,iBAAA;AL+aJ;;AK5aA;EACE,cAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,yBAAA;EACA,qBAAA;EACA,gBAAA;AL+aF;;AK5aA;EACE,qBAAA;EACA,gBAAA;AL+aF;;AK7aA;EACE,kBAAA;EAEA,kBAAA;EACA,QAAA;AL+aF;AK9aE;EACE,eAAA;EACA,mBAAA;EACA,iBAAA;ALgbJ;AK9aE;EACE,iBAAA;EACA,eAAA;ALgbJ;AI5mBI;ECgLJ;IAeI,YAAA;ELibF;AACF;;AK9aA;EACE,UAAA;ALibF;;AK/aA;EACE,kBAAA;EACA,eAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;ALkbF;AI7nBI;ECsMJ;IAOI,iBAAA;ELobF;AACF;;AKlbA;EACE,mBAAA;EACA,eAAA;ALqbF;AKpbG;EACG,eAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;ALsbN;AI9oBI;ECmND;IAQK,eAAA;IACA,iBAAA;IACA,eAAA;IACA,aAAA;ELubN;AACF;;AK/aA;EACE,2BAAA;EACA,uBAAA;ALkbF;AKjbE;EACE,YAAA;EACA,WAAA;EACA,kBAAA;ALmbJ","file":"style.css"}
\ No newline at end of file
diff --git a/img/sub-product.png b/img/sub-product.png
new file mode 100644
index 0000000..9c319ed
Binary files /dev/null and b/img/sub-product.png differ
diff --git a/img/subproductux.jpg b/img/subproductux.jpg
new file mode 100644
index 0000000..bd99180
Binary files /dev/null and b/img/subproductux.jpg differ
diff --git a/index.html b/index.html
index a49f507..52233d3 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <meta name="description" content="UX designer Sophie Kim">
-    <meta name="keywords" content="HTML,CSS,SCSS,JavaScript">
+    <meta name="description" content="UX/UI designer Sophie Kim's Portfolio">
+    <meta name="keywords" content="HTML,CSS,SCSS,JavaScript,UI,UX,designer,developer">
     <meta name="author" content="Sophie Kim">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sophie Kim's Portfolio</title>
@@ -53,9 +53,10 @@ <h4 class="intro"><span>{ Sophie Kim }</span><br/><br/> <p>Creative UX/UI design
         <div class="aboutTitle col12 "> HELLO, THERE!</div>
         <div class="aboutBox ">
           <h1 class="aboutText animation">
-              I am a UX/UI designer based in Wellington, NZ. I worked at MOBIHQ which is food online ordering SaaS company as a Digital Designer and Front-end Designer. Basically my main role is UI styling for ordering storefront across Web, Mobile, Tablet and Kiosk. Before that, I also worked at the Racing Industry Transition Agency and Tech Expozed International Limited as a UX designer. 
-              I am passionate about creating and building user centric web applications. I love brainstoming based on the UX point of view and enjoy discuss with team and solve the problems. I am queen of the CSS so I confidently handle with code based styling. I have learnt Front-end & back-end web development skill. I learn quickly, adapt easily and am driven to succeed.
-              <br/>Outside of coding, I enjoy fashion, makeup, coffee, travel, hang-out and yoga.
+              I am a UX/UI designer based in Wellington, NZ. 
+              I recently worked with MOBIHQ which is food online ordering SaaS company as a Digital Designer/Front-End Designer. Basically my role was responsible for UX/UI for food ordering storefront improving and styling in the cross-platform. Before that, I also worked at the TAB sports betting agancy and Tech Expozed International Limited as a UX designer. 
+              I am passionate about creating and building user centric web applications. I love brainstoming based on the UX point of view and enjoy discuss with team and solve the problems. I am queen of the CSS so I confidently handle with code based styling. I have learnt full stack web development skill. I learn quickly, adapt easily and am driven to succeed.
+              <br/>Outside of working, I enjoy fashion, coffee, travel and yoga.
               <br/><span style="background-color:#fcf4a3;">I am actively looking for a new opportunity.</span>
           </h1>
         </div>
@@ -63,11 +64,20 @@ <h1 class="aboutText animation">
 
 
       <section id="works" class="section">
-        <!-- <div class="row">
-          <h1 class="worksTitle">Projects</h1>
-        </div> -->
+       
         <div class="cardContainer">
-          <div class="row">
+          <div class="flexWrap">
+            <div class="box">
+              <a href="subproductpage.html"  target="_self">
+              <div class="icon">
+                <i class="ti-search" aria-hidden="true"></i>
+              </div>
+              <div class="content">
+                <h3>UX/UI</h3>
+                <p>MOBIHQ - Sub product <br/> menu build feature improvement<br/>Using Figma and React Native/CSS</p>
+              </a>
+              </div>
+            </div>
             <div class="box">
               <a href="https://www.behance.net/gallery/85432687/take-away-order-web" target="_blank">
               <div class="icon">
@@ -91,7 +101,7 @@ <h3>UX Research</h3>
               </a>
               </div>
             </div>
-            <div class="box">
+            <!-- <div class="box">
               <a href="https://alexsophiekim.github.io/Mt.ruapehu"  target="_blank">
               <div class="icon">
                 <i class="ti-search" aria-hidden="true"></i>
@@ -101,7 +111,7 @@ <h3>Live</h3>
                   <p>Mt.Ruapehu - Accomodation Booking System <br/> Single Web application using JavaScript, Bootstrap and sweetalerts2 plugin</p>
                 </a>
               </div>
-            </div>
+            </div> -->
             <div class="box">
               <a href="https://alexsophiekim.github.io/beat-music"  target="_blank">
               <div class="icon">
@@ -166,17 +176,21 @@ <h3>UI/UX design</h3>
       <section id="skills" class="section">
         <h1 class="skillsTitle">Skills</h1>
         <article class="skillSet">
-          <p>UX Research</p>
-          <div class="graph line85" >
-              <span style="width:85%">85%</span>
+          <p>UX/UI-Figma</p>
+          <div class="graph line90" >
+              <span style="width:90%">90%</span>
           </div>
           <p>HTML / CSS / SASS</p>
+          <div class="graph line90">
+              <span style="width:90%">90%</span>
+          </div>
+          <p>React.js</p>
           <div class="graph line85">
               <span style="width:85%">85%</span>
           </div>
           <p>JavaScript / jQuery</p>
-          <div class="graph line80">
-              <span style="width:80%">80%</span>
+          <div class="graph line75">
+              <span style="width:75%">75%</span>
           </div>
           <p>PHP / SQL</p>
           <div class="graph line70">
@@ -187,20 +201,16 @@ <h1 class="skillsTitle">Skills</h1>
               <span style="width:75%">75%</span>
           </div>
           <p>MongoDB</p>
-          <div class="graph line85">
-              <span style="width:85%">85%</span>
+          <div class="graph line75">
+              <span style="width:75%">75%</span>
           </div>
           <p>RESTful APIs</p>
           <div class="graph line80">
               <span style="width:80%">80%</span>
           </div>
-          <p>React.js</p>
-          <div class="graph line75">
-              <span style="width:75%">75%</span>
-          </div>
           <p>CMS</p>
-          <div class="graph line70">
-              <span style="width:70%">70%</span>
+          <div class="graph line80">
+              <span style="width:80%">80%</span>
           </div>
           <p>Git / Github</p>
           <div class="graph line80">
diff --git a/scss/_contact.scss b/scss/_contact.scss
index 1ac61b6..ce0a7c7 100644
--- a/scss/_contact.scss
+++ b/scss/_contact.scss
@@ -11,7 +11,7 @@
     font-weight: 100;
     @include respond-to(sm){
       font-size: 50px;
-      padding-left: 10%;
+      padding: 5%;
     }
   }
 }
diff --git a/scss/_skill.scss b/scss/_skill.scss
index 415f1f4..3ff989d 100644
--- a/scss/_skill.scss
+++ b/scss/_skill.scss
@@ -65,6 +65,11 @@
   40%{ color:rgba(255,255,255,1)}
   100%{ width:85%; color:rgba(255,255,255,1)}
 }
+@keyframes line90{
+  0%{ width:0; color:rgba(255,255,255,0)}
+  40%{ color:rgba(255,255,255,1)}
+  100%{ width:90%; color:rgba(255,255,255,1)}
+}
 
 .animateLine{
   animation: line70 3S 1;
diff --git a/scss/_works.scss b/scss/_works.scss
index 1c53893..d63c98d 100644
--- a/scss/_works.scss
+++ b/scss/_works.scss
@@ -1,6 +1,6 @@
 .worksTitle{
 text-align: center;
-margin-bottom: 20px;
+margin:1em
 }
 .cardContainer{
   position: relative;
@@ -85,17 +85,22 @@ margin-bottom: 20px;
   background: #a8b6b1;
 }
 .cardContainer .box:nth-child(1) .icon{
-  background-image: url(../img/tandoori.jpg);
-  background-position: top;    background-size: cover;
+  background-image: url(../img/sub-product.png);
+  background-color: white;
+  background-position: top;    background-size: contain;
 }
 .cardContainer .box:nth-child(2) .icon{
-  background-image: url(../img/caucus.jpg);
+  background-image: url(../img/tandoori.jpg);
   background-position: top;    background-size: cover;
 }
 .cardContainer .box:nth-child(3) .icon{
-  background-image: url(../img/mtruapehu.png);
+  background-image: url(../img/caucus.jpg);
   background-position: top;    background-size: cover;
 }
+// .cardContainer .box:nth-child(3) .icon{
+//   background-image: url(../img/mtruapehu.png);
+//   background-position: top;    background-size: cover;
+// }
 .cardContainer .box:nth-child(4) .icon{
   background-image: url(../img/beat.gif);
   background-position: top;    background-size: cover;
@@ -116,3 +121,13 @@ margin-bottom: 20px;
   background-image: url(../img/receipt.jpg);
   background-position: top;    background-size: cover;
 }
+
+.flexWrap {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.workPage {
+  margin-top: 6em;
+}
\ No newline at end of file
diff --git a/subproductpage.html b/subproductpage.html
new file mode 100644
index 0000000..7e0f944
--- /dev/null
+++ b/subproductpage.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="UX/UI designer Sophie Kim's Portfolio">
+    <meta name="keywords" content="HTML,CSS,SCSS,JavaScript,UI,UX,designer,developer">
+    <meta name="author" content="Sophie Kim">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sophie Kim's Portfolio</title>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800|Share:400,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
+    <link rel="stylesheet" href="plugIns/themify-icons/themify-icons.css">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Sub-product UI/UX full work</title>
+    <style>
+        .badgeGroup {
+            display: flex;
+            justify-content: center;
+        }
+        .badgeItem {
+            list-style: none;
+            border:1px solid grey;
+            border-radius: 4px;
+            margin-right: 0.5em;
+            padding: 2px 10px;
+            font-size: 0.8em;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a style="text-decoration:none;" href="index.html">
+          <img class="logo" src="img/logoDark.png" alt="">
+          <img class="mLogo" src="img/logoLight.png" alt=""> </a>
+        <nav class="nav">
+          <div class="toggle">
+            <i class="ti-menu"></i>
+            <i class="ti-close"></i>
+          </div>
+          <ul>
+            <li><a href="index.html">HOME</a> </li>
+            <li><a class="about" href="./index.html#about">ABOUT</a></li>
+            <li><a href="./index.html#works">WORKS</a></li>
+            <li><a class="skills" href="./index.html#skills">SKILLS</a></li>
+            <li><a href="./index.html#contact">CONTACT</a></li>
+          </ul>
+        </nav>
+      </header>
+    <div class="workPage">
+        <h1 class="worksTitle">MOBIHQ - Sub-product UI/UX work</h1>
+        <nav class="badgeGroup">
+            <li class="badgeItem">UX Research</li>
+            <li class="badgeItem">Wireframe</li>
+            <li class="badgeItem">Prototype</li>
+        </nav>
+        <img src="img/subproductux.jpg"/>
+    </div>
+</body>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="js/script.js" charset="utf-8"></script>
+</html>
\ No newline at end of file