diff --git a/app/components/ContactIcons.tsx b/app/components/ContactIcons.tsx
index e756a42..6ab37c9 100755
--- a/app/components/ContactIcons.tsx
+++ b/app/components/ContactIcons.tsx
@@ -3,7 +3,7 @@ let ContactIcons = () => {
         <ul className="flex space-x-5">
             <li>
                 <a href="https://github.com/WinsDominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
-                    <svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <svg className="w-7 h-7 transition ease-in-out delay-60 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <title>GitHub</title>
                         <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
@@ -11,7 +11,7 @@ let ContactIcons = () => {
             </li>
             <li>
                 <a href="https://social.winscloud.net/@winsdominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
-                    <svg fill="currentColor" className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <svg fill="currentColor" className="w-7 h-7 transition ease-in-out delay-60 opacity-75 hover:opacity-100 hover:scale-105 duration-300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <title>Mastodon</title>
                         <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
                     </svg>
@@ -19,7 +19,7 @@ let ContactIcons = () => {
             </li>
             <li>
                 <a href="https://matrix.to/#/@winsdominoes:matrix.winscloud.net" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
-                    <svg fill="currentColor" className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <svg fill="currentColor" className="w-7 h-7 transition ease-in-out delay-60 opacity-75 hover:opacity-100 hover:scale-105 duration-300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <title>Matrix</title>
                         <path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/>
                     </svg>
@@ -27,7 +27,7 @@ let ContactIcons = () => {
             </li>
             <li>
                 <a href="https://facebook.com/WinsDominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
-                    <svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <svg className="w-7 h-7 transition ease-in-out delay-60 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                         <title>Facebook</title>
                         <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
                     </svg>
@@ -35,7 +35,7 @@ let ContactIcons = () => {
             </li>
             <li>
                 <a href="https://instagram.com/winsdominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
-                    <svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <svg className="w-7 h-7 transition ease-in-out delay-60 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <title>Instagram</title>
                         <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
                     </svg>
@@ -43,7 +43,7 @@ let ContactIcons = () => {
             </li>
             <li>
                 <a href="https://twitter.com/WinsDominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
-                    <svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <svg className="w-7 h-7 transition ease-in-out delay-60 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <title>Twitter</title>
                         <path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/>
                     </svg>
diff --git a/app/components/Timeline.tsx b/app/components/Timeline.tsx
index f591e78..43152f2 100755
--- a/app/components/Timeline.tsx
+++ b/app/components/Timeline.tsx
@@ -1,27 +1,37 @@
+import Image from "next/image";
+
 const Timeline = () => {
     const data = [
         {
             id: 1,
             school: "Sarasas Witaed Minburi School",
             period: "Pre-Kindergarden - 4th Grade",
+            address: "65/151 Suwinthawong Rd, Saen Saep, Min Buri, Bangkok, Thailand 10510",
+            image: "/images/photos/school-logo/swm.jpg",
             date: "2009 - 2016"
         },
         {
             id: 2,
             school: "Sarasas Witaed Romklao International Programme",
             period: "4th Grade - 6th Grade",
+            address: "124 Rom Klao Rd, Khlong Sam Prawet, Lat Krabang, Bangkok, Thailand 10520",
+            image: "/images/photos/school-logo/swr-iep.jpg",
             date: "2016 - 2019"
         },
         {
             id: 3,
-            school: "Homeschooling with Wolsey Hall Oxford, England",
+            school: "Homeschooling with Wolsey Hall Oxford",
             period: "7th Grade - 9th Grade",
+            address: "66 Banbury Road, Oxford, United Kingdom",
+            image: "/images/photos/school-logo/wsh.jpg",
             date: "2019 - 2022"
         },
         {
             id: 4,
             school: "Rugby School Thailand",
             period: "9th Grade - Present (10th Grade)",
+            address: "7, 2, Khao Mai Kaew, Bang Lamung District, Chon Buri, Thailand 20150",
+            image: "/images/photos/school-logo/rst.png",
             date: "Present"
         }
     ]
@@ -29,14 +39,24 @@ const Timeline = () => {
     return (
         <div className="grid">
             <div>
-                {data.map(({ id, school, period, date }) => (
+                {data.map(({ id, school, period, address, image, date }) => (
                     <div key={id} className="relative pl-8 sm:pl-32 py-6 group">
                         <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-slate-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-indigo-600 after:border-4 after:box-content after:border-slate-50 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
                             <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-emerald-600 bg-emerald-100 rounded-full">{date}</time>
                             <div className="text-xl font-bold text-slate-900 dark:text-white">{school}</div>
                         </div>
-                        <p className="text-sm "></p>
-                        <div className="text-slate-500 dark:text-slate-100">{period}</div>
+
+                        <div className="flex flex-col gap-2">
+                            <p className="text-sm text-slate-600 dark:text-slate-100">{address}</p>
+                            <p className="text-slate-500 dark:text-slate-100">{period}</p>
+                            <Image 
+                                className="h-auto max-w-full rounded-lg" 
+                                src={image}
+                                width={200} 
+                                height={200}
+                                alt=""
+                            />
+                        </div>
                     </div>
                 ))} 
             </div>