diff --git a/javascript-practice/src/assets/images/dollar-icon.svg b/javascript-practice/src/assets/images/dollar-icon.svg
new file mode 100644
index 0000000..c20b593
--- /dev/null
+++ b/javascript-practice/src/assets/images/dollar-icon.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG" clip-path="url(#clip0_9_619)">
+<g id="Icons/account/ic_account">
+<path id="Oval-8" fill-rule="evenodd" clip-rule="evenodd" d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM13.4504 14.5983C13.4504 14.7799 13.422 14.9479 13.3652 15.1025C13.3085 15.2571 13.2234 15.3908 13.1099 15.5037C12.9965 15.6165 12.8558 15.7049 12.6879 15.7687C12.5201 15.8325 12.3251 15.8644 12.1028 15.8644C11.909 15.8644 11.7187 15.8361 11.5319 15.7797C11.3452 15.7233 11.1785 15.6251 11.0319 15.4853C10.8853 15.3454 10.7683 15.159 10.6809 14.9259C10.5934 14.6928 10.5496 14.402 10.5496 14.0536H8.5C8.5 14.6425 8.58511 15.1479 8.75532 15.5699C8.92553 15.9919 9.15248 16.3416 9.43617 16.6188C9.71986 16.8961 10.0449 17.1083 10.4113 17.2555C10.7778 17.4027 11.1572 17.4984 11.5496 17.5426V19H12.6773V17.5352C13.1028 17.4911 13.4894 17.3929 13.8369 17.2408C14.1844 17.0887 14.4811 16.8875 14.727 16.6372C14.9728 16.387 15.1631 16.0901 15.2979 15.7466C15.4326 15.4031 15.5 15.0154 15.5 14.5836C15.5 14.1076 15.4255 13.6954 15.2766 13.347C15.1277 12.9986 14.9184 12.6931 14.6489 12.4306C14.3794 12.1681 14.0567 11.9362 13.6809 11.735C13.305 11.5338 12.8877 11.3375 12.4291 11.1462C12.1454 11.0284 11.9078 10.9143 11.7163 10.8039C11.5248 10.6935 11.3712 10.5757 11.2553 10.4506C11.1395 10.3254 11.0579 10.1893 11.0106 10.0421C10.9634 9.89485 10.9397 9.73046 10.9397 9.5489C10.9397 9.36733 10.9634 9.19804 11.0106 9.04101C11.0579 8.88398 11.1312 8.74781 11.2305 8.63249C11.3298 8.51717 11.4563 8.42639 11.6099 8.36015C11.7636 8.2939 11.9468 8.26078 12.1596 8.26078C12.552 8.26078 12.8652 8.40676 13.0993 8.69874C13.3333 8.99071 13.4504 9.43112 13.4504 10.02H15.5C15.5 9.52926 15.4374 9.0864 15.3121 8.69138C15.1868 8.29635 15.0083 7.95408 14.7766 7.66456C14.5449 7.37504 14.2636 7.1395 13.9326 6.95794C13.6017 6.77637 13.2329 6.65615 12.8262 6.59727V5H11.6915V6.57518C11.266 6.61935 10.8818 6.72117 10.539 6.88065C10.1962 7.04013 9.90189 7.24746 9.65603 7.50263C9.41016 7.7578 9.22104 8.05713 9.08865 8.40063C8.95626 8.74413 8.89007 9.12443 8.89007 9.54154C8.89007 10.0224 8.96454 10.4371 9.11347 10.7855C9.26241 11.1339 9.47163 11.4381 9.74113 11.6982C10.0106 11.9583 10.3345 12.1877 10.7128 12.3864C11.091 12.5852 11.5118 12.7753 11.9752 12.9569C12.2447 13.0599 12.4728 13.1654 12.6596 13.2734C12.8463 13.3814 12.9988 13.4991 13.117 13.6267C13.2352 13.7543 13.3203 13.8966 13.3723 14.0536C13.4243 14.2107 13.4504 14.3922 13.4504 14.5983Z" fill="black" fill-opacity="0.54"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_9_619">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/javascript-practice/src/assets/images/ic_category_foodndrink.png.png b/javascript-practice/src/assets/images/ic_category_foodndrink.png.png
new file mode 100644
index 0000000..8d61471
Binary files /dev/null and b/javascript-practice/src/assets/images/ic_category_foodndrink.png.png differ
diff --git a/javascript-practice/src/assets/images/ic_category_other_income.png.png b/javascript-practice/src/assets/images/ic_category_other_income.png.png
new file mode 100644
index 0000000..24d0828
Binary files /dev/null and b/javascript-practice/src/assets/images/ic_category_other_income.png.png differ
diff --git a/javascript-practice/src/assets/images/ic_category_transport.png.png b/javascript-practice/src/assets/images/ic_category_transport.png.png
new file mode 100644
index 0000000..a7eaf5b
Binary files /dev/null and b/javascript-practice/src/assets/images/ic_category_transport.png.png differ
diff --git a/javascript-practice/src/assets/images/icon-search.svg b/javascript-practice/src/assets/images/icon-search.svg
new file mode 100644
index 0000000..fb1e68a
--- /dev/null
+++ b/javascript-practice/src/assets/images/icon-search.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0393 11.6247L12.8033 11.8607L11.9213 10.9787C12.8027 9.89008 13.3333 8.50675 13.3333 7.00008C13.3333 3.50808 10.492 0.666748 7 0.666748C3.508 0.666748 0.666668 3.50808 0.666668 7.00008C0.666668 10.4921 3.508 13.3334 7 13.3334C8.50667 13.3334 9.89 12.8027 10.9787 11.9214L11.8607 12.8034L11.6247 13.0394L15.626 17.0407L17.04 15.6267L13.0393 11.6247ZM7.00067 11.3334C4.61133 11.3334 2.66733 9.38941 2.66733 7.00008C2.66733 4.61075 4.61133 2.66675 7.00067 2.66675C9.39 2.66675 11.334 4.61075 11.334 7.00008C11.334 9.38941 9.38933 11.3334 7.00067 11.3334Z" fill="gray"/>
+</svg>
diff --git a/javascript-practice/src/assets/images/question-icon.svg b/javascript-practice/src/assets/images/question-icon.svg
new file mode 100644
index 0000000..30eca57
--- /dev/null
+++ b/javascript-practice/src/assets/images/question-icon.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="24" height="24" transform="translate(-0.000244141)" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6_360" transform="scale(0.0104167)"/>
+</pattern>
+<image id="image0_6_360" width="96" height="96" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MEQ3NUZEQjYzQUExMUUzQkVDNjhFN0I2MTY3RDVDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MEQ3NUZEQzYzQUExMUUzQkVDNjhFN0I2MTY3RDVDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcwRDc1RkQ5NjNBQTExRTNCRUM2OEU3QjYxNjdENUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcwRDc1RkRBNjNBQTExRTNCRUM2OEU3QjYxNjdENUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0DRG0gAAB+NJREFUeNrsXUts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"/>
+</defs>
+</svg>