diff --git a/css/global.css b/css/global.css
index 5130cb9..bb38273 100644
--- a/css/global.css
+++ b/css/global.css
@@ -17,4 +17,8 @@ body{
     align-items: center;
     color: #e3e3e3;
     background-color: black;
+}
+
+img{
+    transition: .5s;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f67c0a6..9ca1e25 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" href="logo.png">
+  <link rel="icon" href="logo.webp">
   <title>Muhammad Rifzkhy All Fhayed</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
@@ -55,6 +55,22 @@ <h1>MUHAMMAD RIFZKHY ALL FHAYED</h1>
       </div>
     </section>
 
+    <!-- TODO: Skill -->
+    <section>
+      <div class="title">
+        <h1>SKILL</h1>
+        
+      </div>
+    </section>
+
+    <!-- TODO: Project -->
+    <section class="" style="background-color: #101010; color: #e3e3e3;">
+      <div class="title">
+        <h1>PROJECT</h1>
+        
+      </div>
+    </section>    
+
     <!-- TODO: Certificate -->
     <section>
       <div class="jumbotron p-3">
@@ -63,11 +79,11 @@ <h1>CERTIFICATE</h1>
         </div>
         <div class="certificate">
           <div class="row p-1">
-            <div class="col p-3" align="center"><img class="image" src="src/certificate/Sertifikat PKL.png" data-tilt
+            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat PKL.webp" data-tilt
                 data-tilt-glare></div>
-            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat LSP front.png" data-tilt
+            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat LSP front.webp" data-tilt
                 data-tilt-glare></div>
-            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat Kompetensi front.png" data-tilt
+            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat Kompetensi front.webp" data-tilt
                 data-tilt-glare></div>
           </div>
         </div>
@@ -76,21 +92,13 @@ <h1>AWARD CERTIFICATE</h1>
         </div>
         <div class="certificate">
           <div class="row p-1">
-            <div class="col p-3" align="center"><img class="image" src="src/certificate/piagam.png" data-tilt
+            <div class="col p-3" align="center"><img src="src/certificate/piagam.webp" data-tilt
                 data-tilt-glare></div>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- TODO: Project -->
-    <section class="" style="background-color: #101010; color: #e3e3e3;">
-      <div class="title" align="center">
-        <h1>PROJECT</h1>
-        
-      </div>
-    </section>
-
   </div>
 
   <script type="text/javascript" src="src/vanilla-tilt.js">
diff --git a/src/certificate/Sertifikat Kompetensi front.webp b/src/certificate/Sertifikat Kompetensi front.webp
new file mode 100644
index 0000000..0249482
Binary files /dev/null and b/src/certificate/Sertifikat Kompetensi front.webp differ
diff --git a/src/certificate/Sertifikat LSP front.webp b/src/certificate/Sertifikat LSP front.webp
new file mode 100644
index 0000000..5288494
Binary files /dev/null and b/src/certificate/Sertifikat LSP front.webp differ
diff --git a/src/certificate/Sertifikat PKL.webp b/src/certificate/Sertifikat PKL.webp
new file mode 100644
index 0000000..a69282c
Binary files /dev/null and b/src/certificate/Sertifikat PKL.webp differ
diff --git a/src/certificate/piagam.webp b/src/certificate/piagam.webp
new file mode 100644
index 0000000..068e7ba
Binary files /dev/null and b/src/certificate/piagam.webp differ
diff --git a/src/rifzkhy.webp b/src/rifzkhy.webp
new file mode 100644
index 0000000..7d17bf5
Binary files /dev/null and b/src/rifzkhy.webp differ
