diff --git a/src/assets/reor-logo.svg b/src/assets/reor-logo.svg
new file mode 100644
index 00000000..9756081d
--- /dev/null
+++ b/src/assets/reor-logo.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+<path d="M0 0 C5.82485779 3.51996782 10.54466582 8.98962934 12.5625 15.5 C13.36764105 23.33608208 13.68710392 31.11922577 8.5625 37.5 C3.75801361 42.54521222 -0.59927055 46.10562995 -7.70703125 46.8359375 C-16.22326573 46.92983204 -22.11345494 46.6177288 -28.40234375 40.62890625 C-34.7841668 33.72505269 -35.91792252 28.29832071 -35.7421875 18.9453125 C-35.04689797 11.08319245 -31.38995981 6.95041296 -25.53515625 1.9453125 C-18.47077988 -2.92213491 -7.84396301 -3.47595223 0 0 Z " fill="#0F334C" transform="translate(35.4375,1.5)"/>
+<path d="M0 0 C5.82485779 3.51996782 10.54466582 8.98962934 12.5625 15.5 C13.36764105 23.33608208 13.68710392 31.11922577 8.5625 37.5 C3.75801361 42.54521222 -0.59927055 46.10562995 -7.70703125 46.8359375 C-16.22326573 46.92983204 -22.11345494 46.6177288 -28.40234375 40.62890625 C-34.7841668 33.72505269 -35.91792252 28.29832071 -35.7421875 18.9453125 C-35.04689797 11.08319245 -31.38995981 6.95041296 -25.53515625 1.9453125 C-18.47077988 -2.92213491 -7.84396301 -3.47595223 0 0 Z M-21.4375 3.5 C-19.72104611 4.64430259 -17.99654417 5.77717223 -16.25 6.875 C-15.651875 7.41125 -15.05375 7.9475 -14.4375 8.5 C-14.4375 9.82 -14.4375 11.14 -14.4375 12.5 C-15.015 12.190625 -15.5925 11.88125 -16.1875 11.5625 C-18.30645512 10.56188231 -20.1301424 9.8845596 -22.4375 9.5 C-23.4275 9.995 -23.4275 9.995 -24.4375 10.5 C-24.4375 9.51 -24.4375 8.52 -24.4375 7.5 C-28.60253903 9.24126632 -29.8335407 11.21337553 -31.6796875 15.2109375 C-33.30290573 20.1140606 -33.02508272 24.70052791 -31.4375 29.5625 C-31.1075 30.201875 -30.7775 30.84125 -30.4375 31.5 C-28.7875 31.5 -27.1375 31.5 -25.4375 31.5 C-25.7675 33.48 -26.0975 35.46 -26.4375 37.5 C-20.06194823 42.68013581 -15.75497903 43.85389172 -7.625 43.1875 C-4.30227447 42.67476321 -4.30227447 42.67476321 -1.4375 40.5 C-2.406875 40.108125 -3.37625 39.71625 -4.375 39.3125 C-7.4375 37.5 -7.4375 37.5 -8.3125 34.8125 C-8.35375 34.049375 -8.395 33.28625 -8.4375 32.5 C-7.880625 32.809375 -7.32375 33.11875 -6.75 33.4375 C-4.31209567 34.55761821 -2.07525814 35.06037364 0.5625 35.5 C1.26516613 32.52425724 1.26516613 32.52425724 1.5625 29.5 C2.5525 31.15 3.5425 32.8 4.5625 34.5 C8.30157104 32.00728597 8.54163078 30.81906209 9.5625 26.5 C9.97973107 21.58689132 10.04967023 17.86241762 7.5625 13.5 C6.5725 13.5 5.5825 13.5 4.5625 13.5 C4.48 12.55125 4.3975 11.6025 4.3125 10.625 C3.91175077 7.39538209 3.91175077 7.39538209 1.5 6.125 C0.860625 5.91875 0.22125 5.7125 -0.4375 5.5 C-0.4375 4.84 -0.4375 4.18 -0.4375 3.5 C-2.16557318 3.16104344 -3.89501974 2.82908475 -5.625 2.5 C-6.58792969 2.314375 -7.55085938 2.12875 -8.54296875 1.9375 C-13.52121723 1.18505219 -16.83459129 1.39581316 -21.4375 3.5 Z " fill="#082337" transform="translate(35.4375,1.5)"/>
+<path d="M0 0 C0 0.66 0 1.32 0 2 C0.639375 2.20625 1.27875 2.4125 1.9375 2.625 C4 4 4 4 4.75 7.125 C4.87375 8.548125 4.87375 8.548125 5 10 C5.9590625 10.1546875 5.9590625 10.1546875 6.9375 10.3125 C7.618125 10.539375 8.29875 10.76625 9 11 C10.79750058 16.39250175 10.76681926 21.81246104 8.5 27.0625 C8.005 28.031875 7.51 29.00125 7 30 C6.01 30 5.02 30 4 30 C3.34 28.02 2.68 26.04 2 24 C2 24.99 2 25.98 2 27 C1.68911632 28.67099977 1.35919668 30.33871537 1 32 C-0.65 31.67 -2.3 31.34 -4 31 C-4 29.02 -4 27.04 -4 25 C-5.32 24.67 -6.64 24.34 -8 24 C-8 22.35 -8 20.7 -8 19 C-8.66 19 -9.32 19 -10 19 C-9.34 17.35 -8.68 15.7 -8 14 C-8.66 14 -9.32 14 -10 14 C-10.33 15.32 -10.66 16.64 -11 18 C-11.66 18 -12.32 18 -13 18 C-13.02578125 17.09636719 -13.0515625 16.19273438 -13.078125 15.26171875 C-13.13484375 14.08222656 -13.1915625 12.90273438 -13.25 11.6875 C-13.29640625 10.51574219 -13.3428125 9.34398437 -13.390625 8.13671875 C-13.69873912 4.94706612 -13.69873912 4.94706612 -15.859375 3.20703125 C-16.91898438 2.60955078 -16.91898438 2.60955078 -18 2 C-18.99 1.34 -19.98 0.68 -21 0 C-13.92002185 -3.53998908 -7.24243982 -2.06926852 0 0 Z " fill="#193E58" transform="translate(35,5)"/>
+<path d="M0 0 C0.66 0 1.32 0 2 0 C2 0.99 2 1.98 2 3 C3.65 2.67 5.3 2.34 7 2 C7.6875 4.25 7.6875 4.25 8 7 C6.5625 9.3125 6.5625 9.3125 5 11 C6.98 11.66 8.96 12.32 11 13 C11 13.33 11 13.66 11 14 C9.02 14.33 7.04 14.66 5 15 C7.97 15.33 10.94 15.66 14 16 C13.0625 18.375 13.0625 18.375 11 21 C8.06562476 22.09319862 5.09021663 22.54802954 2 23 C0.2365625 23.309375 0.2365625 23.309375 -1.5625 23.625 C-2.366875 23.74875 -3.17125 23.8725 -4 24 C-6.35636623 19.43454044 -6.8263903 15.02315675 -6 10 C-4.49672765 6.47433967 -2.74167095 2.74167095 0 0 Z " fill="#183B54" transform="translate(9,9)"/>
+<path d="M0 0 C0.99 0.495 1.98 0.99 3 1.5 C3 2.16 3 2.82 3 3.5 C2.01 3.995 2.01 3.995 1 4.5 C1 5.82 1 7.14 1 8.5 C0.05125 8.665 -0.8975 8.83 -1.875 9 C-5.08126412 10.12222102 -5.08126412 10.12222102 -5.84375 12.4140625 C-6.32618625 14.42184864 -6.67119562 16.46141284 -7 18.5 C-7.66 18.5 -8.32 18.5 -9 18.5 C-9.02578125 17.59636719 -9.0515625 16.69273438 -9.078125 15.76171875 C-9.13484375 14.58222656 -9.1915625 13.40273438 -9.25 12.1875 C-9.29640625 11.01574219 -9.3428125 9.84398437 -9.390625 8.63671875 C-9.69873912 5.44706612 -9.69873912 5.44706612 -11.859375 3.70703125 C-12.91898438 3.10955078 -12.91898438 3.10955078 -14 2.5 C-14.99 1.84 -15.98 1.18 -17 0.5 C-11.30895144 -2.34552428 -5.77040207 -2.4646859 0 0 Z " fill="#306488" transform="translate(31,4.5)"/>
+<path d="M0 0 C0.66 0 1.32 0 2 0 C2.03867187 1.35544922 2.03867187 1.35544922 2.078125 2.73828125 C2.13484375 3.91777344 2.1915625 5.09726562 2.25 6.3125 C2.29640625 7.48425781 2.3428125 8.65601563 2.390625 9.86328125 C2.69873912 13.05293388 2.69873912 13.05293388 4.859375 14.79296875 C5.56578125 15.19128906 6.2721875 15.58960938 7 16 C7.99 16.66 8.98 17.32 10 18 C2.81221969 20.80498744 -2.85125229 20.33428497 -10 18 C-10 15 -10 15 -8 13 C-8 12.01 -8 11.02 -8 10 C-7.05125 9.835 -6.1025 9.67 -5.125 9.5 C-1.91873588 8.37777898 -1.91873588 8.37777898 -1.15625 6.0859375 C-0.67381375 4.07815136 -0.32880438 2.03858716 0 0 Z " fill="#2E5D7E" transform="translate(24,25)"/>
+<path d="M0 0 C0.99 0.33 1.98 0.66 3 1 C4.79750058 6.39250175 4.76681926 11.81246104 2.5 17.0625 C2.005 18.031875 1.51 19.00125 1 20 C0.01 20 -0.98 20 -2 20 C-4.27221369 15.62783431 -3.90528745 13.01734401 -2.6875 8.3125 C-2.40261719 7.17425781 -2.11773437 6.03601563 -1.82421875 4.86328125 C-1 2 -1 2 0 0 Z " fill="#295778" transform="translate(41,15)"/>
+<path d="M0 0 C0.625 1.875 0.625 1.875 1 4 C-1 6 -1 6 -3.625 6.125 C-4.40875 6.08375 -5.1925 6.0425 -6 6 C-6 6.99 -6 7.98 -6 9 C-4.68 9.33 -3.36 9.66 -2 10 C-3.45463481 10.38909985 -4.91391207 10.76088029 -6.375 11.125 C-7.18710938 11.33382812 -7.99921875 11.54265625 -8.8359375 11.7578125 C-9.55007813 11.83773437 -10.26421875 11.91765625 -11 12 C-11.66 11.34 -12.32 10.68 -13 10 C-12.80882285 7.00489133 -12.42426865 4.74870939 -10.9375 2.125 C-7.76918698 0.28533437 -4.61773684 0.88329881 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z " fill="#12344D" transform="translate(22,29)"/>
+<path d="M0 0 C0 9.375 0 9.375 -1 14 C-2.65 13.67 -4.3 13.34 -6 13 C-6 11.02 -6 9.04 -6 7 C-7.32 6.67 -8.64 6.34 -10 6 C-10 4.68 -10 3.36 -10 2 C-8.52112267 1.66538533 -7.04188942 1.33234333 -5.5625 1 C-4.32693359 0.7215625 -4.32693359 0.7215625 -3.06640625 0.4375 C-1 0 -1 0 0 0 Z " fill="#26506E" transform="translate(37,23)"/>
+<path d="M0 0 C1.62490954 -0.02698189 3.24994633 -0.04638757 4.875 -0.0625 C5.77992187 -0.07410156 6.68484375 -0.08570313 7.6171875 -0.09765625 C10 0 10 0 12 1 C10.92598892 3.91517292 10.22189824 5.77810176 8 8 C5.6171875 8.1953125 5.6171875 8.1953125 2.875 8.125 C1.50988281 8.09792969 1.50988281 8.09792969 0.1171875 8.0703125 C-0.58148437 8.04710937 -1.28015625 8.02390625 -2 8 C-1.01 6.35 -0.02 4.7 1 3 C0.01 3.33 -0.98 3.66 -2 4 C-1.34 2.68 -0.68 1.36 0 0 Z " fill="#76B0DA" transform="translate(27,15)"/>
+<path d="M0 0 C0.103125 0.53625 0.20625 1.0725 0.3125 1.625 C1.18092697 4.62502044 2.55620296 7.2379535 4 10 C2.35 10.33 0.7 10.66 -1 11 C-1.33 12.65 -1.66 14.3 -2 16 C-8.875 13.125 -8.875 13.125 -10 12 C-10.04063832 10.33382885 -10.042721 8.66611905 -10 7 C-9.01 6.67 -8.02 6.34 -7 6 C-6.01 7.485 -6.01 7.485 -5 9 C-3.68 9 -2.36 9 -1 9 C-1.20625 8.071875 -1.4125 7.14375 -1.625 6.1875 C-2 3 -2 3 0 0 Z " fill="#0B293F" transform="translate(37,27)"/>
+<path d="M0 0 C2.0625 0.4375 2.0625 0.4375 4 1 C3.45276317 4.37462715 2.9451 6.08235 1 9 C2.98 9.66 4.96 10.32 7 11 C7 11.33 7 11.66 7 12 C4.03 12.66 1.06 13.32 -2 14 C-2 2 -2 2 0 0 Z " fill="#316284" transform="translate(13,11)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 4.3 4 7.6 4 11 C4.66 11.33 5.32 11.66 6 12 C2.7 12 -0.6 12 -4 12 C-3.67 11.34 -3.34 10.68 -3 10 C-0.9375 9.375 -0.9375 9.375 1 9 C-0.32 8.34 -1.64 7.68 -3 7 C-2.5359375 6.1028125 -2.5359375 6.1028125 -2.0625 5.1875 C-0.89790296 2.91043228 -0.89790296 2.91043228 0 0 Z " fill="#264F6D" transform="translate(17,13)"/>
+<path d="M0 0 C1.37478516 0.01740234 1.37478516 0.01740234 2.77734375 0.03515625 C3.69644531 0.04417969 4.61554687 0.05320312 5.5625 0.0625 C6.27277344 0.07410156 6.98304687 0.08570312 7.71484375 0.09765625 C6.90234375 2.47265625 6.90234375 2.47265625 4.71484375 5.09765625 C1.09459926 6.16023538 -2.54139862 6.67179587 -6.28515625 7.09765625 C-2.87189473 0.12273054 -2.87189473 0.12273054 0 0 Z " fill="#84BDE6" transform="translate(15.28515625,24.90234375)"/>
+<path d="M0 0 C2 1 2 1 3.3125 3.4375 C5.27286429 6.41434947 6.64662411 7.00305041 10 8 C6.55549263 10.29633824 4.06187717 10.54016485 0 11 C-2.21538462 4.6 -2.21538462 4.6 -1.125 1.5625 C-0.75375 1.046875 -0.3825 0.53125 0 0 Z " fill="#3D77A1" transform="translate(24,34)"/>
+<path d="M0 0 C2.5 1.125 2.5 1.125 5 3 C5.5883927 6.95063669 5.08658519 9.60929907 3 13 C2.34 13 1.68 13 1 13 C-0.32229189 10.35541621 -0.09677194 8.32238699 -0.0625 5.375 C-0.05347656 4.37210938 -0.04445312 3.36921875 -0.03515625 2.3359375 C-0.02355469 1.56507812 -0.01195312 0.79421875 0 0 Z " fill="#4584B1" transform="translate(4,20)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4.125 3.875 4.125 3.875 4 7 C3.34 7.66 2.68 8.32 2 9 C1.01 8.34 0.02 7.68 -1 7 C-1.33 9.31 -1.66 11.62 -2 14 C-2.33 14 -2.66 14 -3 14 C-3.32374517 8.49633208 -3.53286034 4.56327794 0 0 Z " fill="#2C5C7E" transform="translate(6,14)"/>
+<path d="M0 0 C0.99 0.33 1.98 0.66 3 1 C3 4.63 3 8.26 3 12 C0.525 11.01 0.525 11.01 -2 10 C-2.17942163 6.05272412 -2.09350689 3.4019487 0 0 Z " fill="#4E93C5" transform="translate(41,15)"/>
+<path d="M0 0 C0 2.64 0 5.28 0 8 C-0.99 8.495 -0.99 8.495 -2 9 C-2.763125 8.21625 -3.52625 7.4325 -4.3125 6.625 C-6.90891805 3.92742283 -6.90891805 3.92742283 -10 2 C-6.49223216 0.39644899 -3.85645121 -0.22036864 0 0 Z " fill="#3C76A0" transform="translate(24,3)"/>
+<path d="M0 0 C0.66 0.66 1.32 1.32 2 2 C1.7578125 4.3828125 1.7578125 4.3828125 1.125 7.125 C0.92132813 8.03507812 0.71765625 8.94515625 0.5078125 9.8828125 C0.25644531 10.93082031 0.25644531 10.93082031 0 12 C-0.66 12 -1.32 12 -2 12 C-2.33 11.01 -2.66 10.02 -3 9 C-3.99 9.495 -3.99 9.495 -5 10 C-8.5 10.1875 -8.5 10.1875 -12 10 C-12.66 9.34 -13.32 8.68 -14 8 C-13.32453125 8.00902344 -12.6490625 8.01804687 -11.953125 8.02734375 C-6.68808819 8.03217693 -6.68808819 8.03217693 -2.4453125 5.375 C-1.21363994 3.23991035 -1.21363994 3.23991035 0 0 Z " fill="#224863" transform="translate(39,15)"/>
+<path d="M0 0 C0 0.99 0 1.98 0 3 C-3.20380017 5.13586678 -4.01939967 5.23132175 -7.6875 5.125 C-8.89986328 5.09792969 -8.89986328 5.09792969 -10.13671875 5.0703125 C-11.05904297 5.03550781 -11.05904297 5.03550781 -12 5 C-11.67 4.01 -11.34 3.02 -11 2 C-8.70961976 0.85480988 -7.46931463 0.92648088 -4.9375 1 C-3.638125 1 -2.33875 1 -1 1 C-0.67 0.67 -0.34 0.34 0 0 Z " fill="#40779E" transform="translate(22,29)"/>
+<path d="M0 0 C2.86724686 0.57344937 3.8614515 0.8614515 6 3 C6.1953125 5.1640625 6.1953125 5.1640625 6.125 7.625 C6.10695313 8.44226562 6.08890625 9.25953125 6.0703125 10.1015625 C6.03550781 11.04128906 6.03550781 11.04128906 6 12 C5.67 12 5.34 12 5 12 C5 10.35 5 8.7 5 7 C4.01 7.33 3.02 7.66 2 8 C0.23537317 4.91190305 0 3.76687864 0 0 Z " fill="#0B2A41" transform="translate(16,7)"/>
+<path d="M0 0 C1.31571603 0.2547514 2.62760376 0.52934141 3.9375 0.8125 C4.66839844 0.96332031 5.39929688 1.11414063 6.15234375 1.26953125 C6.76207031 1.51058594 7.37179688 1.75164063 8 2 C8.33 2.99 8.66 3.98 9 5 C6.1875 5.6875 6.1875 5.6875 3 6 C1.125 4.75 1.125 4.75 0 3 C0 2.01 0 1.02 0 0 Z " fill="#8CBADB" transform="translate(25,3)"/>
+<path d="M0 0 C3.375 -0.125 3.375 -0.125 7 0 C9 2 9 2 9 5 C4.545 4.01 4.545 4.01 0 3 C0 2.01 0 1.02 0 0 Z " fill="#8CBBDD" transform="translate(14,40)"/>
+<path d="M0 0 C1.65 0.33 3.3 0.66 5 1 C4.67 2.65 4.34 4.3 4 6 C2.35 5.67 0.7 5.34 -1 5 C-0.67 3.35 -0.34 1.7 0 0 Z " fill="#A0C8E5" transform="translate(32,31)"/>
+<path d="M0 0 C2.0625 0.4375 2.0625 0.4375 4 1 C3.67 2.65 3.34 4.3 3 6 C1.35 5.67 -0.3 5.34 -2 5 C-1.125 1.125 -1.125 1.125 0 0 Z " fill="#A1CBE9" transform="translate(13,11)"/>
+<path d="M0 0 C1.5625 1.1875 1.5625 1.1875 3 3 C2.6875 5.6875 2.6875 5.6875 2 8 C0.68 7.34 -0.64 6.68 -2 6 C-2 4.35 -2 2.7 -2 1 C-1.34 0.67 -0.68 0.34 0 0 Z " fill="#0B293E" transform="translate(29,33)"/>
+<path d="M0 0 C0.33 0 0.66 0 1 0 C1.0270043 1.45823212 1.04639787 2.91660675 1.0625 4.375 C1.07410156 5.18710937 1.08570313 5.99921875 1.09765625 6.8359375 C1 9 1 9 0 11 C-1.65 10.67 -3.3 10.34 -5 10 C-5 8.68 -5 7.36 -5 6 C-3.68 6.33 -2.36 6.66 -1 7 C-0.67 4.69 -0.34 2.38 0 0 Z " fill="#366D94" transform="translate(44,19)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 2.65 4 4.3 4 6 C1.69 6 -0.62 6 -3 6 C-2.01 4.02 -1.02 2.04 0 0 Z " fill="#1D425C" transform="translate(17,13)"/>
+<path d="M0 0 C0 1.98 0 3.96 0 6 C-5.75 4.25 -5.75 4.25 -8 2 C-1.125 0 -1.125 0 0 0 Z " fill="#316488" transform="translate(37,23)"/>
+<path d="M0 0 C0.66 0.33 1.32 0.66 2 1 C2 1.99 2 2.98 2 4 C2.66 4.33 3.32 4.66 4 5 C2.68 7.31 1.36 9.62 0 12 C-0.66 11.34 -1.32 10.68 -2 10 C-1.7578125 7.6171875 -1.7578125 7.6171875 -1.125 4.875 C-0.92132813 3.96492188 -0.71765625 3.05484375 -0.5078125 2.1171875 C-0.34023437 1.41851563 -0.17265625 0.71984375 0 0 Z " fill="#224864" transform="translate(9,21)"/>
+<path d="M0 0 C1.485 0.99 1.485 0.99 3 2 C3 2.66 3 3.32 3 4 C4.65 4 6.3 4 8 4 C7.67 4.99 7.34 5.98 7 7 C5.35 7.33 3.7 7.66 2 8 C1.34 5.36 0.68 2.72 0 0 Z " fill="#265271" transform="translate(25,6)"/>
+<path d="M0 0 C0 0.99 0 1.98 0 3 C-1 4 -1 4 -3.5625 4.0625 C-4.7690625 4.0315625 -4.7690625 4.0315625 -6 4 C-6.33 5.32 -6.66 6.64 -7 8 C-7.66 8 -8.32 8 -9 8 C-8.67 6.35 -8.34 4.7 -8 3 C-6.865625 2.690625 -5.73125 2.38125 -4.5625 2.0625 C-1.21224901 1.37075469 -1.21224901 1.37075469 0 0 Z " fill="#193F5A" transform="translate(22,31)"/>
+<path d="M0 0 C0.103125 0.53625 0.20625 1.0725 0.3125 1.625 C1.18092697 4.62502044 2.55620296 7.2379535 4 10 C2.68 10.33 1.36 10.66 0 11 C-1.7578125 5.04296875 -1.7578125 5.04296875 -2 3 C-1.34 2.01 -0.68 1.02 0 0 Z " fill="#13364F" transform="translate(37,27)"/>
+<path d="M0 0 C2.31 0.66 4.62 1.32 7 2 C3.5647952 4.29013653 2.014669 4.17842973 -2 4 C-1.34 2.68 -0.68 1.36 0 0 Z " fill="#4A8EBE" transform="translate(27,40)"/>
+<path d="M0 0 C1.670625 0.061875 1.670625 0.061875 3.375 0.125 C3.045 1.115 2.715 2.105 2.375 3.125 C-0.265 2.795 -2.905 2.465 -5.625 2.125 C-3.625 0.125 -3.625 0.125 0 0 Z " fill="#4788B7" transform="translate(19.625,3.875)"/>
+<path d="M0 0 C2.475 0.99 2.475 0.99 5 2 C4.67 3.32 4.34 4.64 4 6 C2.68 5.34 1.36 4.68 0 4 C0 2.68 0 1.36 0 0 Z " fill="#4482AF" transform="translate(39,21)"/>
+<path d="M0 0 C2.97 0.495 2.97 0.495 6 1 C5.67 1.99 5.34 2.98 5 4 C4.01 3.34 3.02 2.68 2 2 C1.67 4.31 1.34 6.62 1 9 C0.67 9 0.34 9 0 9 C0 6.03 0 3.06 0 0 Z " fill="#33688E" transform="translate(3,19)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C3.67 2.65 3.34 4.3 3 6 C2.34 6 1.68 6 1 6 C0.67 4.02 0.34 2.04 0 0 Z " fill="#5199CB" transform="translate(4,27)"/>
+<path d="M0 0 C1.32 0.33 2.64 0.66 4 1 C4 2.65 4 4.3 4 6 C2.68 5.67 1.36 5.34 0 5 C0 3.35 0 1.7 0 0 Z " fill="#1A3E57" transform="translate(27,29)"/>
+</svg>
diff --git a/src/components/Chat/AddContextFiltersModal.tsx b/src/components/Chat/AddContextFiltersModal.tsx
index 379d1f71..ee141539 100644
--- a/src/components/Chat/AddContextFiltersModal.tsx
+++ b/src/components/Chat/AddContextFiltersModal.tsx
@@ -101,13 +101,13 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
 
   return (
     <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="mb-6 ml-6 mt-2 h-full max-h-[90vh] w-[800px] overflow-y-auto overflow-x-hidden p-4">
+      <div className="mb-6 ml-6 mt-2 h-full max-h-[80vh] w-[70vw] overflow-y-auto overflow-x-hidden p-4">
         <h4 className="mb-4 text-center text-2xl text-white">
           Choose specific context files or customise the RAG search
         </h4>
-        <div className="flex">
+        <div className="flex flex-col md:flex-row">
           {/* Left side: File selection */}
-          <div className="flex-1 pr-4">
+          <div className="flex-1">
             <h3 className="mb-2 text-lg text-white">Select files for context</h3>
             <SearchBarWithFilesSuggestion
               vaultDirectory={vaultDirectory}
@@ -138,18 +138,25 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
 
           {/* Vertical divider */}
           <div className="mx-4 flex flex-col items-center justify-center">
-            <div className="w-px grow bg-gray-600" />
-            <div className="my-2 flex size-8 items-center justify-center rounded-full bg-gray-800 text-sm font-bold text-white">
-              Or
+            {/* Horizontal separator for larger screens */}
+            <div className="flex w-full items-center md:hidden">
+              <div className="h-px grow bg-gray-600" />
+              <div className="mx-2 flex items-center justify-center rounded-full bg-gray-800 text-sm font-bold text-white">
+                Or
+              </div>
+              <div className="h-px grow bg-gray-600" />
+            </div>
+
+            {/* Vertical separator for smaller screens */}
+            <div className="hidden h-full flex-col items-center md:flex">
+              <div className="w-px grow bg-gray-600" />
+              <div className="my-2 text-sm font-bold text-white">Or</div>
+              <div className="w-px grow bg-gray-600" />
             </div>
-            <div className="w-px grow bg-gray-600" />
           </div>
+
           {/* Right side: Context settings */}
-          <div
-            className={`flex-1 pl-4
-              
-                `}
-          >
+          <div className="flex-1">
             {/* ${
               internalFilesSelected.length > 0
                 ? "opacity-30	 pointer-events-none"
@@ -158,7 +165,7 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
             <h3 className="mb-2 text-lg text-white">Context settings</h3>
             <div className="mb-4 text-white">
               <p>Number of notes to add to context:</p>
-              <div className="mt-2 w-full rounded bg-neutral-800 pb-3 pr-2">
+              <div className="mt-2 w-full rounded bg-neutral-800 p-4 pb-2">
                 <Slider
                   aria-label="Number of Notes"
                   value={numberOfChunksToFetch}
@@ -208,17 +215,17 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
                 {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
               </div>
               {showAdvanced && (
-                <div className="mt-2 flex space-x-4">
-                  <div className="flex flex-1 flex-col items-center text-white">
+                <div className="mt-2 flex flex-col items-center space-x-4">
+                  <div className="flex h-[400px] w-[300px] flex-col items-center overflow-hidden text-white">
                     <p className="mb-1">Min Date:</p>
                     <DayPicker
                       selected={minDate}
                       onSelect={(date) => setMinDate(date || undefined)}
                       mode="single"
-                      className="my-day-picker w-full"
+                      className="my-day-picker size-full"
                     />
                   </div>
-                  <div className="flex flex-1 flex-col items-center text-white">
+                  <div className="flex h-[400px] w-[300px] flex-col items-center overflow-hidden text-white">
                     <p className="mb-1">Max Date:</p>
                     <DayPicker
                       selected={maxDate}
diff --git a/src/components/Chat/Chat-Prompts.tsx b/src/components/Chat/Chat-Prompts.tsx
index c8a1d350..e7b5a1a0 100644
--- a/src/components/Chat/Chat-Prompts.tsx
+++ b/src/components/Chat/Chat-Prompts.tsx
@@ -8,11 +8,11 @@ interface Props {
 
 const PromptSuggestion: FC<Props> = ({ promptText, onClick }: Props) => (
   <button
-    className={`
-            mt-2 cursor-pointer rounded border border-solid border-white/50
-             bg-neutral-800 p-5
-            text-base
-            text-white shadow hover:bg-neutral-300 hover:text-black`}
+    className={`mx-1 mt-2
+            h-[100px] max-w-[200px] cursor-pointer rounded-lg border
+             border-solid border-white/50 bg-transparent p-5 text-xs
+            text-white
+            opacity-40 shadow hover:opacity-70`}
     onClick={onClick}
     type="button"
   >
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 74b22f74..2b9915d1 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef, Dispatch, MutableRefObject, SetStateAction } from 'react'
 
 import { HiOutlineClipboardCopy, HiOutlinePencilAlt } from 'react-icons/hi'
 import { toast } from 'react-toastify'
@@ -9,6 +9,7 @@ import posthog from 'posthog-js'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 
+import { FaRegUserCircle } from 'react-icons/fa'
 import AddContextFiltersModal from './AddContextFiltersModal'
 import PromptSuggestion from './Chat-Prompts'
 import ChatInput from './ChatInput'
@@ -21,34 +22,22 @@ import {
   resolveRAGContext,
 } from './chatUtils'
 
+import LoadingDots from '@/utils/animations'
 import errorToStringRendererProcess from '@/utils/error'
 import SimilarEntriesComponent from '../Sidebars/SemanticSidebar/SimilarEntriesComponent'
+import '../../styles/chat.css'
 
 // convert ask options to enum
 enum AskOptions {
   Ask = 'Ask',
-  // AskFile = "Ask File",
-  // TemporalAsk = "Temporal Ask",
-  // FlashcardAsk = "Flashcard Ask",
 }
-// const ASK_OPTIONS = Object.values(AskOptions);
 
 const EXAMPLE_PROMPTS: { [key: string]: string[] } = {
   [AskOptions.Ask]: [
-    // "What are my thoughts on AGI?",
-    // "Tell me about my notes on Nietzsche",
+    'What have I written about Philosophy?',
+    'Generate a study guide from my notes.',
+    'Which authors have I discussed positively about?',
   ],
-  // [AskOptions.AskFile]: [
-  //   "Summarize this file",
-  //   "What are the key points in this file?",
-  // ],
-  // [AskOptions.TemporalAsk]: [
-  //   "Summarize what I have worked on today",
-  //   "Which tasks have I completed this past week?",
-  // ],
-  // [AskOptions.FlashcardAsk]: [
-  //   "Create some flashcards based on the current note",
-  // ],
 }
 
 interface AnonymizedChatFilters {
@@ -78,6 +67,178 @@ interface ChatWithLLMProps {
   setChatFilters: React.Dispatch<ChatFilters>
 }
 
+interface ChatContainerProps {
+  chatContainerRef: MutableRefObject<HTMLDivElement | null>
+  openFileAndOpenEditor: (path: string, optionalContentToWriteOnCreate?: string) => Promise<void>
+  currentChatHistory: ChatHistory | undefined
+  isAddContextFiltersModalOpen: boolean
+  chatFilters: ChatFilters
+  setChatFilters: Dispatch<ChatFilters>
+  setUserTextFieldInput: Dispatch<SetStateAction<string>>
+  defaultModelName: string
+  vaultDirectory: string
+  setIsAddContextFiltersModalOpen: Dispatch<SetStateAction<boolean>>
+  handlePromptSelection: (prompt: string | undefined) => void
+  askText: AskOptions
+  loadAnimation: boolean
+}
+
+const ChatContainer: React.FC<ChatContainerProps> = ({
+  chatContainerRef,
+  openFileAndOpenEditor,
+  currentChatHistory,
+  isAddContextFiltersModalOpen,
+  chatFilters,
+  setChatFilters,
+  setUserTextFieldInput,
+  defaultModelName,
+  vaultDirectory,
+  setIsAddContextFiltersModalOpen,
+  handlePromptSelection,
+  askText,
+  loadAnimation,
+}) => {
+  const getClassName = (message: ChatMessageToDisplay): string => {
+    return message.messageType === 'error'
+      ? `markdown-content ${message.messageType}-chat-message text-white`
+      : `markdown-content ${message.role}-chat-message`
+  }
+
+  const getDisplayMessage = (message: ChatMessageToDisplay): string | undefined => {
+    return message.visibleContent ? message.visibleContent : formatOpenAIMessageContentIntoString(message.content)
+  }
+
+  const copyToClipboard = (message: ChatMessageToDisplay) => {
+    navigator.clipboard.writeText(getDisplayMessage(message) ?? '')
+    toast.success('Copied to clipboard!')
+  }
+
+  const createNewNote = async (message: ChatMessageToDisplay) => {
+    const title = `${(getDisplayMessage(message) ?? `${new Date().toDateString()}`).substring(0, 20)}...`
+    openFileAndOpenEditor(title, getDisplayMessage(message))
+  }
+
+  return (
+    <div
+      ref={chatContainerRef}
+      className="chat-container relative flex h-full flex-col items-center justify-center overflow-auto bg-transparent"
+    >
+      <div className="relative mt-4 flex size-full flex-col items-center gap-3 overflow-x-hidden p-10 pt-0">
+        <div className="w-full max-w-3xl">
+          {currentChatHistory && currentChatHistory.displayableChatHistory.length > 0 ? (
+            // Display chat history if it exists
+            currentChatHistory.displayableChatHistory
+              .filter((msg) => msg.role !== 'system')
+              .map((message, index) => (
+                <div className={`w-full ${getClassName(message)} flex`}>
+                  <div className="relative items-start pl-4 pt-3">
+                    {message.role === 'user' ? (
+                      <FaRegUserCircle size={22} />
+                    ) : (
+                      <img src="/src/assets/reor-logo.svg" style={{ width: '22px', height: '22px' }} alt="ReorImage" />
+                    )}
+                  </div>
+                  <div className="w-full flex-col gap-1">
+                    <div className="flex grow flex-col px-5 py-2.5">
+                      <ReactMarkdown
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                        rehypePlugins={[rehypeRaw]}
+                        className="max-w-[95%] break-words"
+                      >
+                        {message.visibleContent
+                          ? message.visibleContent
+                          : formatOpenAIMessageContentIntoString(message.content)}
+                      </ReactMarkdown>
+                      {message.role === 'assistant' && (
+                        <div className="flex">
+                          <div
+                            className="cursor-pointer items-center justify-center rounded p-1 hover:bg-neutral-700"
+                            onClick={() => copyToClipboard(message)}
+                          >
+                            <HiOutlineClipboardCopy color="gray" size={18} className="text-gray-200" title="Copy" />
+                          </div>
+                          <div
+                            className="cursor-pointer items-center justify-center rounded p-1 hover:bg-neutral-700"
+                            onClick={() => createNewNote(message)}
+                          >
+                            <HiOutlinePencilAlt color="gray" size={18} className="text-gray-200" title="New Note" />
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))
+          ) : (
+            // Display centered "Start a conversation..." if there is no currentChatHistory
+            <div className="relative flex w-full flex-col items-center">
+              <div className="relative flex size-full flex-col text-center lg:top-10 lg:max-w-2xl">
+                <div className="flex size-full justify-center">
+                  <img src="/src/assets/reor-logo.svg" style={{ width: '64px', height: '64px' }} alt="ReorImage" />
+                </div>
+                <h1 className="mb-10 text-[28px] text-gray-300">
+                  Welcome to your AI-powered assistant! Start a conversation with your second brain!
+                </h1>
+                <div className="flex flex-col rounded-md bg-bg-000 focus-within:ring-1 focus-within:ring-[#8c8c8c]">
+                  <textarea
+                    onKeyDown={(e) => {
+                      if (!e.shiftKey && e.key === 'Enter') {
+                        e.preventDefault()
+                        handlePromptSelection(undefined)
+                      }
+                    }}
+                    className="h-[100px] w-full resize-none rounded-t-md border-0 bg-transparent p-4 text-text-gen-100 caret-white focus:outline-none"
+                    placeholder="What can Reor help you with today?"
+                    onChange={(e) => setUserTextFieldInput(e.target.value)}
+                  />
+                  <div className="h-px w-[calc(100%-5%)] self-center bg-gray-600" />
+                  <div className="flex items-center justify-between px-4 py-3 ">
+                    <span className="rounded-b-md bg-transparent text-sm tracking-tight text-text-gen-100">
+                      {defaultModelName}
+                    </span>
+                    <button
+                      className="cursor-pointer rounded-md border-0 bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
+                      onClick={() => {
+                        setIsAddContextFiltersModalOpen(true)
+                      }}
+                      type="button"
+                    >
+                      {chatFilters.files.length > 0 ? 'Update RAG filters' : 'Customise context'}
+                    </button>
+                  </div>
+                </div>
+                <div className="mt-4 size-full justify-center md:flex-row lg:flex">
+                  {EXAMPLE_PROMPTS[askText].map((option) => (
+                    <PromptSuggestion key={option} promptText={option} onClick={() => handlePromptSelection(option)} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {loadAnimation && (
+          <div className="relative left-4 ml-1 mt-4 flex w-full max-w-3xl items-start gap-6">
+            <img src="/src/assets/reor-logo.svg" style={{ width: '22px', height: '22px' }} alt="ReorImage" />
+            <LoadingDots />
+          </div>
+        )}
+
+        {isAddContextFiltersModalOpen && (
+          <AddContextFiltersModal
+            vaultDirectory={vaultDirectory}
+            isOpen={isAddContextFiltersModalOpen}
+            onClose={() => setIsAddContextFiltersModalOpen(false)}
+            chatFilters={chatFilters}
+            setChatFilters={setChatFilters}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
 const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
   vaultDirectory,
   openFileAndOpenEditor,
@@ -90,14 +251,22 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
   const [askText] = useState<AskOptions>(AskOptions.Ask)
   const [loadingResponse, setLoadingResponse] = useState<boolean>(false)
+  const [loadAnimation, setLoadAnimation] = useState<boolean>(false)
   const [readyToSave, setReadyToSave] = useState<boolean>(false)
+  const [promptSelected, setPromptSelected] = useState<boolean>(false)
   const [currentContext, setCurrentContext] = useState<DBQueryResult[]>([])
   const [isAddContextFiltersModalOpen, setIsAddContextFiltersModalOpen] = useState<boolean>(false)
+  const [defaultModelName, setDefaultLLMName] = useState<string>('')
+  const chatContainerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const context = getChatHistoryContext(currentChatHistory)
-    setCurrentContext(context)
-  }, [currentChatHistory])
+    const fetchDefaultLLM = async () => {
+      const defaultName = await window.llm.getDefaultLLMName()
+      setDefaultLLMName(defaultName)
+    }
+
+    fetchDefaultLLM()
+  }, [])
 
   // update chat context when files are added
   useEffect(() => {
@@ -159,6 +328,7 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
     [setCurrentChatHistory], // Add any other dependencies here if needed
   )
 
+  /* eslint-disable */
   const handleSubmitNewMessage = async (chatHistory: ChatHistory | undefined) => {
     posthog.capture('chat_message_submitted', {
       chatId: chatHistory?.id,
@@ -168,9 +338,9 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
     let outputChatHistory = chatHistory
 
     try {
-      if (loadingResponse) return
+      if (loadingResponse || !userTextFieldInput.trim()) return
       setLoadingResponse(true)
-      if (!userTextFieldInput.trim()) return
+      setLoadAnimation(true)
       const defaultLLMName = await window.llm.getDefaultLLMName()
       if (!outputChatHistory || !outputChatHistory.id) {
         const chatID = Date.now().toString()
@@ -181,14 +351,6 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
       }
       if (outputChatHistory.displayableChatHistory.length === 0) {
         if (chatFilters) {
-          // chatHistory.displayableChatHistory.push({
-          //   role: "system",
-          //   content:
-          //     "You are an advanced question answer agent answering questions based on provided context. You will respond to queries in second person: saying things like 'you'. The context provided was written by the same user who is asking the question.",
-          //   messageType: "success",
-
-          //   context: [],
-          // });
           outputChatHistory.displayableChatHistory.push(await resolveRAGContext(userTextFieldInput, chatFilters))
         }
       } else {
@@ -199,7 +361,6 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
           context: [],
         })
       }
-
       setUserTextFieldInput('')
 
       setCurrentChatHistory(outputChatHistory)
@@ -222,21 +383,45 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
         appendNewContentToMessageHistory(outputChatHistory.id, errorToStringRendererProcess(error), 'error')
       }
     }
-    // so here we could save the chat history
-    setLoadingResponse(false)
   }
+  /* eslint-enable */
+
+  /* eslint-disable */
+  useEffect(() => {
+    // Update context when the chat history changes
+    const context = getChatHistoryContext(currentChatHistory)
+    setCurrentContext(context)
+
+    if (!promptSelected) {
+      setLoadAnimation(false)
+      setLoadingResponse(false)
+    } else {
+      setPromptSelected(false)
+    }
+  }, [currentChatHistory?.id])
+  /* eslint-enable */
+
+  useEffect(() => {
+    // Handle prompt selection and message submission separately
+    if (promptSelected) {
+      handleSubmitNewMessage(undefined)
+    }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [promptSelected])
 
   useEffect(() => {
     const handleOpenAIChunk = async (receivedChatID: string, chunk: ChatCompletionChunk) => {
       const newContent = chunk.choices[0].delta.content ?? ''
-      if (newContent) {
+      if (newContent && receivedChatID === currentChatHistory?.id) {
+        if (loadAnimation) setLoadAnimation(false)
         appendNewContentToMessageHistory(receivedChatID, newContent, 'success')
       }
     }
 
     const handleAnthropicChunk = async (receivedChatID: string, chunk: MessageStreamEvent) => {
       const newContent = chunk.type === 'content_block_delta' ? (chunk.delta.text ?? '') : ''
-      if (newContent) {
+      if (newContent && receivedChatID === currentChatHistory?.id) {
+        if (loadAnimation) setLoadAnimation(false)
         appendNewContentToMessageHistory(receivedChatID, newContent, 'success')
       }
     }
@@ -249,127 +434,44 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
       removeOpenAITokenStreamListener()
       removeAnthropicTokenStreamListener()
     }
-  }, [appendNewContentToMessageHistory])
-
-  const getClassName = (message: ChatMessageToDisplay): string => {
-    const baseClasses = 'markdown-content break-words rounded-lg p-1'
-
-    if (message.messageType === 'error') {
-      return `${baseClasses} bg-red-100 text-red-800`
-    }
-    if (message.role === 'assistant') {
-      return `${baseClasses} bg-neutral-600 text-gray-200`
-    }
-    return `${baseClasses} bg-blue-100 text-blue-800`
-  }
-
-  const getDisplayMessage = (message: ChatMessageToDisplay): string | undefined => {
-    return message.visibleContent ? message.visibleContent : formatOpenAIMessageContentIntoString(message.content)
-  }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [appendNewContentToMessageHistory, loadingResponse, currentChatHistory?.id])
 
-  const copyToClipboard = (message: ChatMessageToDisplay) => {
-    navigator.clipboard.writeText(getDisplayMessage(message) ?? '')
-    toast.success('Copied to clipboard!')
-  }
-
-  const createNewNote = async (message: ChatMessageToDisplay) => {
-    const title = `${(getDisplayMessage(message) ?? `${new Date().toDateString()}`).substring(0, 20)}...`
-    openFileAndOpenEditor(title, getDisplayMessage(message))
-  }
+  const handleNewChatMessage = useCallback(
+    (prompt: string | undefined) => {
+      if (prompt) setUserTextFieldInput(prompt)
+      setPromptSelected(true)
+    },
+    [setUserTextFieldInput],
+  )
 
   return (
     <div className="flex size-full items-center justify-center">
-      <div className="mx-auto flex size-full flex-col overflow-hidden border-y-0 border-l-[0.001px] border-r-0 border-solid border-neutral-700 bg-neutral-800">
-        <div className="flex h-full flex-col overflow-auto bg-transparent p-3 pt-0">
-          <div className="mx-4 mt-2 grow space-y-2">
-            {currentChatHistory?.displayableChatHistory
-              .filter((msg) => msg.role !== 'system')
-              .map((message, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <div key={index}>
-                  <ReactMarkdown rehypePlugins={[rehypeRaw]} className={getClassName(message)}>
-                    {getDisplayMessage(message)}
-                  </ReactMarkdown>
-                  {message.role === 'assistant' && (
-                    <div className="flex">
-                      <div
-                        className="cursor-pointer items-center justify-center rounded p-1 hover:bg-neutral-700"
-                        onClick={() => copyToClipboard(message)}
-                      >
-                        <HiOutlineClipboardCopy color="gray" size={18} className="text-gray-200" title="Copy" />
-                      </div>
-                      <div
-                        className="cursor-pointer items-center justify-center rounded p-1 hover:bg-neutral-700"
-                        onClick={() => createNewNote(message)}
-                      >
-                        <HiOutlinePencilAlt color="gray" size={18} className="text-gray-200" title="New Note" />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-          </div>
-          {(!currentChatHistory || currentChatHistory?.displayableChatHistory.length === 0) && (
-            <>
-              <div className="flex items-center justify-center text-sm text-gray-300">
-                Start a conversation with your notes by typing a message below.
-              </div>
-              <div className="flex items-center justify-center text-sm text-gray-300">
-                <button
-                  className="m-2 h-6 w-40
-                  cursor-pointer rounded-lg border-none bg-slate-600 text-center text-white"
-                  onClick={() => {
-                    setIsAddContextFiltersModalOpen(true)
-                  }}
-                  type="button"
-                >
-                  {chatFilters.files.length > 0 ? 'Update RAG filters' : 'Customise context'}
-                </button>
-              </div>
-            </>
-          )}
-          {isAddContextFiltersModalOpen && (
-            <AddContextFiltersModal
-              vaultDirectory={vaultDirectory}
-              isOpen={isAddContextFiltersModalOpen}
-              onClose={() => setIsAddContextFiltersModalOpen(false)}
-              chatFilters={chatFilters}
-              setChatFilters={setChatFilters}
-            />
-          )}
-          {/* {EXAMPLE_PROMPTS[askText].map((option, index) => {
-            return (
-              <PromptSuggestion
-                key={index}
-                promptText={option}
-                onClick={() => {
-                  setUserTextFieldInput(option);
-                }}
-              />
-            );
-          })} */}
-          {userTextFieldInput === '' &&
-          (!currentChatHistory || currentChatHistory?.displayableChatHistory.length === 0) ? (
-            <>
-              {EXAMPLE_PROMPTS[askText].map((option) => (
-                <PromptSuggestion
-                  key={option}
-                  promptText={option}
-                  onClick={() => {
-                    setUserTextFieldInput(option)
-                  }}
-                />
-              ))}
-            </>
-          ) : undefined}
-        </div>
-        <ChatInput
-          userTextFieldInput={userTextFieldInput}
+      <div className="mx-auto flex size-full flex-col overflow-hidden border-y-0 border-l-[0.001px] border-r-0 border-solid border-neutral-700 bg-dark-gray-c-eleven">
+        <ChatContainer
+          chatContainerRef={chatContainerRef}
+          openFileAndOpenEditor={openFileAndOpenEditor}
+          currentChatHistory={currentChatHistory}
+          isAddContextFiltersModalOpen={isAddContextFiltersModalOpen}
+          chatFilters={chatFilters}
+          setChatFilters={setChatFilters}
           setUserTextFieldInput={setUserTextFieldInput}
-          handleSubmitNewMessage={() => handleSubmitNewMessage(currentChatHistory)}
-          loadingResponse={loadingResponse}
+          defaultModelName={defaultModelName}
+          vaultDirectory={vaultDirectory}
+          setIsAddContextFiltersModalOpen={setIsAddContextFiltersModalOpen}
+          handlePromptSelection={handleNewChatMessage}
           askText={askText}
+          loadAnimation={loadAnimation}
         />
+
+        {currentChatHistory && (
+          <ChatInput
+            userTextFieldInput={userTextFieldInput}
+            setUserTextFieldInput={setUserTextFieldInput}
+            handleSubmitNewMessage={() => handleSubmitNewMessage(currentChatHistory)}
+            loadingResponse={loadingResponse}
+          />
+        )}
       </div>
       {showSimilarFiles && (
         <SimilarEntriesComponent
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index 1daf6579..c20e064f 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 
-import Textarea from '@mui/joy/Textarea'
-import { CircularProgress } from '@mui/material'
+import { PiPaperPlaneRight } from 'react-icons/pi'
 
 interface ChatInputProps {
   userTextFieldInput: string
   setUserTextFieldInput: (value: string) => void
   handleSubmitNewMessage: () => void
   loadingResponse: boolean
-  askText: string
 }
 
 const ChatInput: React.FC<ChatInputProps> = ({
@@ -16,47 +14,43 @@ const ChatInput: React.FC<ChatInputProps> = ({
   setUserTextFieldInput,
   handleSubmitNewMessage,
   loadingResponse,
-  askText,
 }) => (
-  <div className="border-0 border-t-[0.001px] border-solid border-neutral-700 bg-transparent p-3">
-    <div className="flex h-full">
-      <Textarea
-        onKeyDown={(e) => {
-          if (!e.shiftKey && e.key === 'Enter') {
-            e.preventDefault()
-            handleSubmitNewMessage()
-          }
-        }}
-        onChange={(e) => setUserTextFieldInput(e.target.value)}
-        value={userTextFieldInput}
-        className="mr-2 w-full bg-gray-300"
-        name="Outlined"
-        placeholder="Type here to ask your notes..."
-        variant="outlined"
-        style={{
-          backgroundColor: 'rgba(255, 255, 255, 0)',
-          color: 'rgb(212 212 212)',
-          border: 'none',
-        }}
-      />
-      <div className="flex h-full items-center justify-center">
-        {loadingResponse ? (
-          <CircularProgress size={32} thickness={20} style={{ color: 'rgb(209 213 219 / var(--tw-bg-opacity))' }} />
-        ) : (
-          <button
-            aria-expanded="false"
-            aria-haspopup="menu"
-            className={`h-full w-[85px] cursor-pointer select-none rounded border-none
-                  bg-neutral-700 px-2  py-0  text-center align-middle
-                  font-sans text-xs font-bold text-white shadow-md
-                  shadow-gray-900/10 transition-all hover:bg-neutral-900 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-85 focus:shadow-none
-                  active:opacity-85 active:shadow-none`}
-            type="button"
-            onClick={() => handleSubmitNewMessage()}
-          >
-            {askText}
-          </button>
-        )}
+  <div className="relative flex h-titlebar w-full items-center justify-center bg-dark-gray-c-eleven p-10">
+    <div className="  relative bottom-5 flex w-full max-w-3xl">
+      <div className="w-full rounded-lg border-2 border-solid border-neutral-700 p-3 focus-within:ring-1 focus-within:ring-[#8c8c8c]">
+        <div className="relative flex h-full pr-8">
+          <textarea
+            onKeyDown={(e) => {
+              if (userTextFieldInput && !e.shiftKey && e.key === 'Enter') {
+                e.preventDefault()
+                handleSubmitNewMessage()
+              }
+            }}
+            onChange={(e) => setUserTextFieldInput(e.target.value)}
+            value={userTextFieldInput}
+            className="mr-2 max-h-[50px] w-full resize-none overflow-y-auto border-0 bg-gray-300 focus:outline-none"
+            name="Outlined"
+            placeholder="Type here to ask your notes..."
+            rows={1}
+            style={{
+              backgroundColor: 'rgba(255, 255, 255, 0)',
+              color: 'rgb(212 212 212)',
+              border: 'none',
+            }}
+            onInput={(e) => {
+              const target = e.target as HTMLTextAreaElement // Prevent TS inferring type error
+              target.style.height = 'auto'
+              target.style.height = `${Math.min(target.scrollHeight, 160)}px`
+            }}
+          />
+          <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            <PiPaperPlaneRight
+              color={userTextFieldInput && !loadingResponse ? 'white' : 'gray'}
+              onClick={userTextFieldInput ? handleSubmitNewMessage : undefined}
+              className={userTextFieldInput ? 'cursor-pointer' : ''}
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/Chat/ChatsSidebar.tsx b/src/components/Chat/ChatsSidebar.tsx
index 4a682ad7..5f47b0c5 100644
--- a/src/components/Chat/ChatsSidebar.tsx
+++ b/src/components/Chat/ChatsSidebar.tsx
@@ -1,5 +1,7 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
+import { RiChatNewFill, RiArrowDownSLine } from 'react-icons/ri'
+import { IoChatbubbles } from 'react-icons/io5'
 import { ChatHistoryMetadata } from './hooks/use-chat-history'
 import { ChatHistory } from './chatUtils'
 
@@ -18,9 +20,11 @@ export const ChatItem: React.FC<ChatItemProps> = ({
 }) => {
   const isSelected = chatMetadata.id === selectedChatID
 
-  const itemClasses = `flex items-center cursor-pointer px-2 py-1 border-b border-gray-200 hover:bg-neutral-700 h-full mt-0 mb-0 ${
-    isSelected ? 'bg-neutral-700 text-white font-semibold' : 'text-gray-200'
-  }`
+  const itemClasses = `
+    flex items-center cursor-pointer py-2 px-3 rounded-md
+    transition-colors duration-150 ease-in-out
+    ${isSelected ? 'bg-neutral-700 text-white' : 'text-gray-300 hover:bg-neutral-800'}
+  `
 
   const handleContextMenu = (e: React.MouseEvent) => {
     e.preventDefault()
@@ -37,7 +41,8 @@ export const ChatItem: React.FC<ChatItemProps> = ({
         className={itemClasses}
         onContextMenu={handleContextMenu}
       >
-        <span className="mt-0 flex-1 truncate text-[13px]">{chatMetadata.displayName}</span>
+        <IoChatbubbles />
+        <span className="ml-2 flex-1 truncate text-[11px] font-medium">{chatMetadata.displayName}</span>
       </div>
     </div>
   )
@@ -58,6 +63,11 @@ export const ChatsSidebar: React.FC<ChatListProps> = ({
   newChat,
   setShowChatbot,
 }) => {
+  const [isRecentsOpen, setIsRecentsOpen] = useState(true)
+  const dropdownAnimationDelay = 0.2
+
+  const toggleRecents = () => setIsRecentsOpen((prev) => !prev)
+
   const currentSelectedChatID = useRef<string | undefined>()
   useEffect(() => {}, [chatHistoriesMetadata])
   useEffect(() => {
@@ -78,27 +88,54 @@ export const ChatsSidebar: React.FC<ChatListProps> = ({
   }, [chatHistoriesMetadata, setShowChatbot])
 
   return (
-    <div className="h-full overflow-y-auto bg-neutral-800">
-      <div
-        className="m-1 flex cursor-pointer items-center justify-center rounded border border-transparent bg-dark-gray-c-ten px-4 py-[8px] text-white transition duration-150 ease-in-out hover:border-white hover:bg-neutral-700"
-        onClick={newChat}
-      >
-        <span className="text-sm"> + New Chat</span>
-      </div>
+    <div className="flex h-full flex-col overflow-y-auto bg-neutral-800 px-2 pb-4 pt-2.5">
+      <div className="flex h-full flex-col gap-2 text-white/90">
+        <div className="flex min-h-0 flex-1 flex-col gap-4">
+          <div className="mb-4 flex flex-col gap-6">
+            <button
+              className="flex cursor-pointer items-center justify-center gap-2 rounded-md 
+                      border-0 bg-blue-500 py-3 text-white
+                      shadow-md transition-colors duration-200 hover:bg-blue-400 hover:text-gray-200
+                      hover:shadow-lg"
+              type="button"
+              onClick={newChat}
+            >
+              <RiChatNewFill className="text-xl" />
+              <span className="text-xs font-bold">Start New Chat</span>
+            </button>
+          </div>
 
-      {chatHistoriesMetadata
-        .slice()
-        .reverse()
-        .map((chatMetadata) => (
-          <ChatItem
-            key={chatMetadata.id}
-            // chat={chat}
-            chatMetadata={chatMetadata}
-            selectedChatID={currentChatHistory?.id || ''}
-            onChatSelect={onSelect}
-            // currentSelectedChatID={currentSelectedChatID}
-          />
-        ))}
+          {/* Recents Section */}
+          <div className="flex-1">
+            <div className="flex cursor-pointer items-center justify-between" onClick={toggleRecents}>
+              <h4 className="mb-0 mt-1 text-xs font-medium tracking-wider text-gray-200">Recents</h4>
+              <RiArrowDownSLine
+                className={`mt-1 transition-transform duration-200 ${!isRecentsOpen ? 'rotate-0' : 'rotate-180'}`}
+              />
+            </div>
+            {isRecentsOpen && (
+              <ul className="m-0 flex list-none flex-col gap-0.5 p-0">
+                {chatHistoriesMetadata
+                  .slice()
+                  .reverse()
+                  .map((chatMetadata, index) => (
+                    <li
+                      key={chatMetadata.id}
+                      style={{ animationDelay: `${index * dropdownAnimationDelay}s` }}
+                      className="animate-dropdown-fadeIn"
+                    >
+                      <ChatItem
+                        chatMetadata={chatMetadata}
+                        selectedChatID={currentChatHistory?.id || ''}
+                        onChatSelect={onSelect}
+                      />
+                    </li>
+                  ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/styles/chat.css b/src/styles/chat.css
new file mode 100644
index 00000000..dd9c6ba8
--- /dev/null
+++ b/src/styles/chat.css
@@ -0,0 +1,47 @@
+/* Main chat container */
+.markdown-content p {
+    padding: 0.25rem;
+    margin: 0;
+    word-wrap: break-word;
+}
+
+.chat-container {
+    line-height: 1.6;
+}
+
+
+/* User's message box */
+.user-chat-message {
+    background-color: rgb(50, 50, 50);
+    color: rgb(220, 220, 220);
+    border-radius: 10px;
+    margin: 10px 0;
+    padding: 0 4px;
+    font-size: 0.94rem;
+    line-height: 1.2rem;
+}
+
+/* AI's message box */
+.assistant-chat-message {
+    color: rgb(210, 210, 210);
+    margin: 10px 0;
+    padding: 0 4px;
+    font-size: 0.94rem;
+    line-height: 1.2rem;
+}
+
+@keyframes dropdown-fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(10px);
+    }
+}
+
+.animate-dropdown-fadeIn {
+    opacity: 0;
+    animation: dropdown-fadeIn 0.5s ease-out forwards;
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index f14ec95c..a9ba1837 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+:root {
+  --bg-000: 60 1.8% 22%;
+  --gen-100: 50 23.1% 94.9%;
+}
+
 html,
 body {
   padding: 0;
@@ -47,11 +52,6 @@ button {
   -webkit-app-region: no-drag;
 }
 
-.markdown-content p {
-  padding: 0.25rem;
-  margin: 0;
-}
-
 ::-webkit-scrollbar {
   width: 7px;
   /* Adjust the width of the scrollbar */
diff --git a/src/utils/animations.tsx b/src/utils/animations.tsx
new file mode 100644
index 00000000..0c58ad44
--- /dev/null
+++ b/src/utils/animations.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const LoadingDots = () => {
+  return (
+    <div className="flex space-x-1 text-lg text-white">
+      <span className="animate-bounce">.</span>
+      <span className="animate-bounce delay-200">.</span>
+      <span className="animate-bounce delay-[400ms]">.</span>
+    </div>
+  )
+}
+
+export default LoadingDots
diff --git a/tailwind.config.js b/tailwind.config.js
index 45a579ef..8f25d5c1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,14 +17,13 @@ export default {
         'dark-gray-c-nine': '#343434',
         'dark-gray-c-ten': '#383838',
         'dark-gray-c-eleven': '#191919',
-
         "dark-slate-gray": "#2F4F4F",
         "light-arsenic": "#182c44",
         "distinct-dark-purple": "#3a395e",
         "moodly-blue": "#7f7dcb",
-      },
-      fontFamily: {
-        // "material-icons": ["Material Icons"],
+        'bg-000': 'hsl(var(--bg-000) / 1.0)', 
+
+        'text-gen-100': 'hsl(var(--gen-100) / 1.0)',
       },
       height: {
         titlebar: "30px",
@@ -49,9 +48,14 @@ export default {
           '0%': { transform: 'translateX(100%)', opacity: '0'},
           '100%': { transform: 'translateX(0)', opacity: '1'},
         },
+        bounce: {
+          '0%, 20%, 50%, 80%, 100%': { opacity: '1' },
+          '40%, 60%': { opacity: '0' },
+        }
       },
       animation: {
         'slide-in': 'slideIn 0.3s ease-out',
+        'bounce': 'bounce 1.4s infinite both',
       },
     },
   },