diff --git a/README.md b/README.md
index bf40baf..783f7d9 100644
--- a/README.md
+++ b/README.md
@@ -2,63 +2,7 @@
 <!--END_SECTION:waka-->
 
 <!-- header sine wave svg with name centered starts-->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:1;position:relative" width="854" height="180" viewBox="0 0 854 180">
-    <style>
-        .text {
-            font-size: 30px;
-            font-weight: 700;
-            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-        }
 
-        .desc {
-            font-size: 20px;
-            font-weight: 500;
-            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-        }
-
-        .text,
-        .desc {
-            animation: twinkling 4s ease-in-out infinite;
-        }
-
-        @keyframes twinkling {
-            40% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: 0.5;
-            }
-
-            60% {
-                opacity: 1;
-            }
-
-            70% {
-                opacity: 0.5;
-            }
-
-            80% {
-                opacity: 1;
-            }
-        }
-
-        ;
-    </style>
-    <g transform="translate(427, 90) scale(1, 1) translate(-427, -90)">
-
-
-        <path d="" fill="#40B883" opacity="0.4">
-            <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 100Q 213.5 140 427 110T 854 135L 854 0 Z;M0 0L 0 125Q 213.5 140 427 120T 854 110L 854 0 Z;M0 0L 0 145Q 213.5 115 427 145T 854 110L 854 0 Z;M0 0L 0 100Q 213.5 140 427 110T 854 135L 854 0 Z"></animate>
-        </path>
-        <path d="" fill="#40B883" opacity="0.4">
-            <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s" values="M0 0L 0 115Q 213.5 160 427 130T 854 140L 854 0 Z;M0 0L 0 130Q 213.5 100 427 100T 854 120L 854 0 Z;M0 0L 0 125Q 213.5 105 427 130T 854 145L 854 0 Z;M0 0L 0 115Q 213.5 160 427 130T 854 140L 854 0 Z"></animate>
-        </path>
-    </g>
-
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="35%" class="text" style="fill:#fff;" stroke="#none" stroke-width="1">Anda Toshiki</text>
-
-</svg>
 <!-- header sine wave ends -->
 
 <p align="center">
diff --git a/img/footer.svg b/img/footer.svg
new file mode 100644
index 0000000..d1151a7
--- /dev/null
+++ b/img/footer.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:1;position:relative" width="854" height="120" viewBox="0 0 854 120">
+    <style>
+        .text {
+            font-size: 70px;
+            font-weight: 700;
+            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        }
+
+        .desc {
+            font-size: 20px;
+            font-weight: 500;
+            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        }
+
+        path {
+            transform: rotate(180deg);
+            transform-origin: 50% 50%;
+        }
+    </style>
+    <g transform="translate(427, 60) scale(1, 1) translate(-427, -60)">
+
+
+        <path d="" fill="#40B883" opacity="0.4">
+            <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 40Q 213.5 80 427 50T 854 75L 854 0 Z;M0 0L 0 65Q 213.5 80 427 60T 854 50L 854 0 Z;M0 0L 0 85Q 213.5 55 427 85T 854 50L 854 0 Z;M0 0L 0 40Q 213.5 80 427 50T 854 75L 854 0 Z"></animate>
+        </path>
+        <path d="" fill="#40B883" opacity="0.4">
+            <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s" values="M0 0L 0 55Q 213.5 100 427 70T 854 80L 854 0 Z;M0 0L 0 70Q 213.5 40 427 40T 854 60L 854 0 Z;M0 0L 0 65Q 213.5 45 427 70T 854 85L 854 0 Z;M0 0L 0 55Q 213.5 100 427 70T 854 80L 854 0 Z"></animate>
+        </path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/img/header.svg b/img/header.svg
new file mode 100644
index 0000000..f5891c7
--- /dev/null
+++ b/img/header.svg
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:1;position:relative" width="854" height="180" viewBox="0 0 854 180">
+    <style>
+        .text {
+            font-size: 30px;
+            font-weight: 700;
+            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        }
+
+        .desc {
+            font-size: 20px;
+            font-weight: 500;
+            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        }
+
+        .text,
+        .desc {
+            animation: twinkling 4s ease-in-out infinite;
+        }
+
+        @keyframes twinkling {
+            40% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
+
+            60% {
+                opacity: 1;
+            }
+
+            70% {
+                opacity: 0.5;
+            }
+
+            80% {
+                opacity: 1;
+            }
+        }
+
+        ;
+    </style>
+    <g transform="translate(427, 90) scale(1, 1) translate(-427, -90)">
+
+
+        <path d="" fill="#40B883" opacity="0.4">
+            <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 100Q 213.5 140 427 110T 854 135L 854 0 Z;M0 0L 0 125Q 213.5 140 427 120T 854 110L 854 0 Z;M0 0L 0 145Q 213.5 115 427 145T 854 110L 854 0 Z;M0 0L 0 100Q 213.5 140 427 110T 854 135L 854 0 Z"></animate>
+        </path>
+        <path d="" fill="#40B883" opacity="0.4">
+            <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s" values="M0 0L 0 115Q 213.5 160 427 130T 854 140L 854 0 Z;M0 0L 0 130Q 213.5 100 427 100T 854 120L 854 0 Z;M0 0L 0 125Q 213.5 105 427 130T 854 145L 854 0 Z;M0 0L 0 115Q 213.5 160 427 130T 854 140L 854 0 Z"></animate>
+        </path>
+    </g>
+
+    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="35%" class="text" style="fill:#fff;" stroke="#none" stroke-width="1">Anda Toshiki</text>
+</svg>
\ No newline at end of file