diff --git a/frontend/src/assets/LOGO-fold.svg b/frontend/src/assets/LOGO-fold.svg
new file mode 100644
index 00000000..6a58bc90
--- /dev/null
+++ b/frontend/src/assets/LOGO-fold.svg
@@ -0,0 +1,30 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.3328 13.669H28.1019C28.2398 14.4271 28.3088 15.1961 28.3083 15.9667C28.3132 16.9131 28.2005 17.8564 27.9729 18.775H28.6236C28.9021 18.775 29.1691 18.6644 29.3661 18.4674C29.563 18.2705 29.6736 18.0035 29.6736 17.725V15.01C29.6736 14.8339 29.6389 14.6595 29.5716 14.4968C29.5042 14.3341 29.4054 14.1863 29.2809 14.0618C29.1564 13.9373 29.0086 13.8385 28.8459 13.7711C28.6832 13.7037 28.5088 13.669 28.3328 13.669Z" fill="#149CC5"/>
+<path d="M1.69164 15.9667C1.69114 15.1961 1.76022 14.4271 1.89804 13.669H1.66727C1.31164 13.669 0.970593 13.8103 0.719137 14.0617C0.467681 14.3132 0.326416 14.6543 0.326416 15.0099V17.7249C0.326416 18.0034 0.437041 18.2704 0.633954 18.4674C0.830867 18.6643 1.09794 18.7749 1.37642 18.7749H2.02712C1.79945 17.8563 1.68676 16.913 1.69164 15.9667Z" fill="#69CAA4"/>
+<path d="M15 3.795C8.11089 3.795 2.52625 9.07732 2.52625 15.9664C2.52625 22.8556 8.11097 26.205 15 26.205C21.8891 26.205 27.4737 22.8558 27.4737 15.9667C27.4737 9.0777 21.8891 3.795 15 3.795ZM18.0265 21.1253H11.9735C11.1168 21.1265 10.2697 20.944 9.48954 20.59C8.92592 20.3341 7.28177 20.8716 6.82704 20.4631C6.27602 19.9681 6.94405 18.4942 6.6058 17.827C6.1792 16.9853 5.95758 16.0546 5.959 15.1109C5.959 13.5158 6.59265 11.9861 7.72055 10.8582C8.84845 9.73025 10.3782 9.0966 11.9733 9.0966H18.0263C19.6214 9.0966 21.1512 9.73025 22.2791 10.8582C23.407 11.9861 24.0407 13.5158 24.0407 15.1109C24.0407 15.9007 23.8852 16.6828 23.583 17.4126C23.2808 18.1423 22.8378 18.8053 22.2793 19.3638C21.7208 19.9223 21.0578 20.3654 20.3282 20.6677C19.5985 20.97 18.8164 21.1256 18.0266 21.1256L18.0265 21.1253Z" fill="url(#paint0_linear_477_9132)"/>
+<path d="M15 3.795C8.11089 3.795 2.52625 9.07732 2.52625 15.9664C2.52625 22.8556 8.11097 26.205 15 26.205C21.8891 26.205 27.4737 22.8558 27.4737 15.9667C27.4737 9.0777 21.8891 3.795 15 3.795ZM18.0265 21.1253H11.9735C11.1168 21.1265 10.2697 20.944 9.48954 20.59C8.92592 20.3341 7.28177 20.8716 6.82704 20.4631C6.27602 19.9681 6.94405 18.4942 6.6058 17.827C6.1792 16.9853 5.95758 16.0546 5.959 15.1109C5.959 13.5158 6.59265 11.9861 7.72055 10.8582C8.84845 9.73025 10.3782 9.0966 11.9733 9.0966H18.0263C19.6214 9.0966 21.1512 9.73025 22.2791 10.8582C23.407 11.9861 24.0407 13.5158 24.0407 15.1109C24.0407 15.9007 23.8852 16.6828 23.583 17.4126C23.2808 18.1423 22.8378 18.8053 22.2793 19.3638C21.7208 19.9223 21.0578 20.3654 20.3282 20.6677C19.5985 20.97 18.8164 21.1256 18.0266 21.1256L18.0265 21.1253Z" fill="url(#paint1_linear_477_9132)"/>
+<path d="M10.5456 14.915H8.76648V18.7946H10.5456V14.915Z" fill="#75CCCC"/>
+<path d="M14.1198 13.1932H12.3407V18.7946H14.1198V13.1932Z" fill="#75CCCC"/>
+<path d="M17.6939 15.4381H15.9148V18.7946H17.6939V15.4381Z" fill="#75CCCC"/>
+<path d="M21.2334 12.4522H19.4543V18.7946H21.2334V12.4522Z" fill="#75CCCC"/>
+<defs>
+<linearGradient id="paint0_linear_477_9132" x1="6.6502" y1="4.44097" x2="25.0992" y2="29.2491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B2F288"/>
+<stop offset="0.181" stop-color="#80D79C"/>
+<stop offset="0.371" stop-color="#52BEAD"/>
+<stop offset="0.554" stop-color="#2FAABB"/>
+<stop offset="0.724" stop-color="#159CC5"/>
+<stop offset="0.878" stop-color="#0594CB"/>
+<stop offset="1" stop-color="#0091CD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_477_9132" x1="6.6502" y1="4.44097" x2="25.0992" y2="29.2491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B2F288"/>
+<stop offset="0.181" stop-color="#80D79C"/>
+<stop offset="0.371" stop-color="#52BEAD"/>
+<stop offset="0.554" stop-color="#2FAABB"/>
+<stop offset="0.724" stop-color="#159CC5"/>
+<stop offset="0.878" stop-color="#0594CB"/>
+<stop offset="1" stop-color="#0091CD"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/assets/LOGO.svg b/frontend/src/assets/LOGO.svg
new file mode 100644
index 00000000..06ac01fe
--- /dev/null
+++ b/frontend/src/assets/LOGO.svg
@@ -0,0 +1,42 @@
+<svg width="131" height="30" viewBox="0 0 131 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_477_6686)">
+<path d="M28.3328 13.669H28.1019C28.2398 14.4271 28.3088 15.1961 28.3083 15.9667C28.3132 16.9131 28.2005 17.8564 27.9729 18.775H28.6236C28.9021 18.775 29.1691 18.6644 29.3661 18.4674C29.563 18.2705 29.6736 18.0035 29.6736 17.725V15.01C29.6736 14.8339 29.6389 14.6595 29.5716 14.4968C29.5042 14.3341 29.4054 14.1863 29.2809 14.0618C29.1564 13.9373 29.0086 13.8385 28.8459 13.7711C28.6832 13.7037 28.5088 13.669 28.3328 13.669Z" fill="#149CC5"/>
+<path d="M1.69163 15.9667C1.69112 15.1961 1.7602 14.4271 1.89803 13.669H1.66725C1.31163 13.669 0.970578 13.8103 0.719122 14.0617C0.467666 14.3132 0.326401 14.6543 0.326401 15.0099V17.7249C0.326401 18.0034 0.437025 18.2704 0.633939 18.4674C0.830852 18.6643 1.09792 18.7749 1.3764 18.7749H2.0271C1.79944 17.8563 1.68675 16.913 1.69163 15.9667Z" fill="#69CAA4"/>
+<path d="M15 3.795C8.11088 3.795 2.52623 9.07732 2.52623 15.9664C2.52623 22.8556 8.11095 26.205 15 26.205C21.889 26.205 27.4737 22.8558 27.4737 15.9667C27.4737 9.0777 21.889 3.795 15 3.795ZM18.0265 21.1253H11.9735C11.1168 21.1265 10.2697 20.944 9.48953 20.59C8.9259 20.3341 7.28175 20.8716 6.82703 20.4631C6.276 19.9681 6.94403 18.4942 6.60578 17.827C6.17919 16.9853 5.95756 16.0546 5.95898 15.1109C5.95898 13.5158 6.59263 11.9861 7.72053 10.8582C8.84844 9.73025 10.3782 9.0966 11.9733 9.0966H18.0263C19.6214 9.0966 21.1512 9.73025 22.2791 10.8582C23.407 11.9861 24.0407 13.5158 24.0407 15.1109C24.0407 15.9007 23.8852 16.6828 23.5829 17.4126C23.2807 18.1423 22.8377 18.8053 22.2793 19.3638C21.7208 19.9223 21.0578 20.3654 20.3281 20.6677C19.5985 20.97 18.8164 21.1256 18.0266 21.1256L18.0265 21.1253Z" fill="url(#paint0_linear_477_6686)"/>
+<path d="M15 3.795C8.11088 3.795 2.52623 9.07732 2.52623 15.9664C2.52623 22.8556 8.11095 26.205 15 26.205C21.889 26.205 27.4737 22.8558 27.4737 15.9667C27.4737 9.0777 21.889 3.795 15 3.795ZM18.0265 21.1253H11.9735C11.1168 21.1265 10.2697 20.944 9.48953 20.59C8.9259 20.3341 7.28175 20.8716 6.82703 20.4631C6.276 19.9681 6.94403 18.4942 6.60578 17.827C6.17919 16.9853 5.95756 16.0546 5.95898 15.1109C5.95898 13.5158 6.59263 11.9861 7.72053 10.8582C8.84844 9.73025 10.3782 9.0966 11.9733 9.0966H18.0263C19.6214 9.0966 21.1512 9.73025 22.2791 10.8582C23.407 11.9861 24.0407 13.5158 24.0407 15.1109C24.0407 15.9007 23.8852 16.6828 23.5829 17.4126C23.2807 18.1423 22.8377 18.8053 22.2793 19.3638C21.7208 19.9223 21.0578 20.3654 20.3281 20.6677C19.5985 20.97 18.8164 21.1256 18.0266 21.1256L18.0265 21.1253Z" fill="url(#paint1_linear_477_6686)"/>
+<path d="M10.5456 14.915H8.76653V18.7946H10.5456V14.915Z" fill="#75CCCC"/>
+<path d="M14.1197 13.1932H12.3407V18.7946H14.1197V13.1932Z" fill="#75CCCC"/>
+<path d="M17.6938 15.4381H15.9148V18.7946H17.6938V15.4381Z" fill="#75CCCC"/>
+<path d="M21.2335 12.4522H19.4544V18.7946H21.2335V12.4522Z" fill="#75CCCC"/>
+<path d="M49.9855 14.2255C49.5648 13.7479 48.9791 13.3311 48.2457 12.9865C47.5234 12.648 46.5864 12.338 45.46 12.065C44.7797 11.904 44.2248 11.75 43.8106 11.6085C43.4064 11.4708 43.0957 11.3205 42.887 11.1612C42.7118 11.039 42.5779 10.8663 42.5032 10.666C42.4319 10.4299 42.3986 10.184 42.4043 9.93742C42.4043 9.20599 42.6086 8.73468 43.0291 8.49633C43.4773 8.24209 44.2263 8.11322 45.2553 8.11322C45.6439 8.11322 46.0627 8.13121 46.5001 8.16684C46.9356 8.20275 47.3727 8.25693 47.799 8.32784C48.2288 8.39973 48.6265 8.47666 48.9812 8.55653C49.3329 8.63584 49.6291 8.71221 49.8618 8.78361L50.0994 8.85648V5.08593L49.9775 5.04239C49.4622 4.85836 48.7815 4.69582 47.9542 4.55939C47.0074 4.41387 46.0505 4.34497 45.0928 4.35338C42.8788 4.35338 41.1341 4.78913 39.9072 5.64838C38.6596 6.52191 38.0271 8.0015 38.0271 10.0461C38.0271 10.9094 38.1114 11.6474 38.2778 12.2396C38.4364 12.8257 38.7411 13.3617 39.1632 13.7974C39.5756 14.2203 40.1291 14.5809 40.8077 14.8693C41.4737 15.1529 42.3272 15.4165 43.3413 15.6519C43.9259 15.7923 44.503 15.9624 45.0703 16.1617C45.4914 16.3167 45.8201 16.4892 46.0471 16.6743C46.2471 16.829 46.4008 17.0357 46.4914 17.2719C46.5811 17.5499 46.6233 17.841 46.6163 18.1329C46.625 18.4706 46.5739 18.8071 46.4654 19.1269C46.3721 19.3796 46.2014 19.5962 45.9776 19.7457C45.7388 19.9107 45.4171 20.0284 45.0215 20.0957C44.5162 20.1728 44.0054 20.2083 43.4943 20.2017C43.0129 20.2017 42.5217 20.179 42.0341 20.1345C41.5428 20.0901 41.0578 20.0356 40.5925 19.9726C40.1271 19.9096 39.6864 19.8334 39.2793 19.7445C38.9292 19.6721 38.5846 19.5748 38.2482 19.4535L38 19.3602V23.3743L38.1339 23.412C38.7177 23.5765 39.5139 23.7334 40.5008 23.8783C41.5461 24.0276 42.6009 24.1008 43.6569 24.0974C46.2731 24.0974 48.1823 23.5939 49.3314 22.6008C50.4884 21.6011 51.075 20.1345 51.075 18.2417C51.075 17.3461 51.0005 16.5698 50.8534 15.9342C50.7116 15.3008 50.4132 14.7132 49.9855 14.2255Z" fill="#485559"/>
+<path d="M68.9312 6.37533C68.189 5.6229 67.2588 5.09076 66.1662 4.79382C65.0885 4.5015 63.8416 4.35324 62.4603 4.35324C61.0965 4.35324 59.8587 4.5015 58.7815 4.79382C57.6885 5.09076 56.7582 5.6229 56.0164 6.37533C55.2762 7.1258 54.705 8.15102 54.3185 9.42257C53.9357 10.6826 53.7416 12.2982 53.7416 14.2251C53.7416 16.134 53.9311 17.7403 54.3046 18.9991C54.6815 20.2704 55.2435 21.2958 55.9751 22.0466C56.7261 22.8099 57.6656 23.3604 58.6981 23.6419C59.9655 24.0125 61.2802 24.1956 62.6004 24.1854C64.2721 24.1854 67.182 23.705 68.4129 22.5242C68.9675 21.9922 69.5299 21.4276 69.9375 20.6762C70.3419 19.9301 70.6536 19.0133 70.864 17.9512C71.0731 16.8942 71.1791 15.6402 71.1791 14.2248C71.1791 12.2993 70.9896 10.6839 70.616 9.42341C70.2386 8.15221 69.6717 7.12657 68.9312 6.37533ZM60.4175 8.41121C60.9347 8.19547 61.622 8.08613 62.4603 8.08613C63.2986 8.08613 63.991 8.19561 64.5175 8.41156C65.0183 8.61289 65.4396 8.97264 65.7172 9.43601C66.0097 9.91901 66.2157 10.5576 66.3293 11.3346C66.4553 12.2929 66.5135 13.259 66.5035 14.2256C66.5035 15.3682 66.4449 16.3452 66.3294 17.1294C66.216 17.8966 66.0106 18.5209 65.7189 18.985C65.4369 19.4352 65.016 19.7811 64.52 19.9702C63.9929 20.1779 63.2999 20.2831 62.4603 20.2831C61.6208 20.2831 60.9327 20.1781 60.4151 19.9706C59.9239 19.7788 59.5077 19.4331 59.2288 18.985C58.9367 18.5208 58.7313 17.8965 58.6183 17.1294C58.5028 16.3481 58.4442 15.3711 58.4442 14.2256C58.434 13.259 58.4922 12.2929 58.6184 11.3346C58.7316 10.5576 58.9375 9.91894 59.2304 9.43601C59.5051 8.97487 59.9216 8.61531 60.4175 8.41121Z" fill="#485559"/>
+<path d="M78.9823 4.62463H74.4965V23.8256H86.4606V19.8755H78.9823V4.62463Z" fill="#485559"/>
+<path d="M100.062 13.785C100.92 13.4782 101.539 13.0206 101.905 12.4214C102.318 11.7434 102.528 10.8894 102.528 9.88317C102.528 9.01678 102.415 8.24804 102.193 7.59823C101.968 6.93804 101.557 6.35734 101.009 5.92649C100.457 5.48619 99.7074 5.15474 98.7818 4.94138C97.8679 4.73138 96.7054 4.62463 95.3267 4.62463H88.8027V23.8256H95.8957C97.278 23.8256 98.4427 23.7002 99.3575 23.453C100.283 23.2026 101.032 22.8335 101.584 22.3561C102.136 21.8804 102.545 21.2594 102.763 20.5634C102.995 19.8023 103.107 19.0099 103.097 18.2143C103.097 15.9286 102.076 14.4405 100.062 13.785ZM97.8991 11.375C97.7688 11.6337 97.5588 11.8435 97.3 11.9732C97.0131 12.1252 96.6374 12.2327 96.1831 12.2927C95.6202 12.3602 95.0536 12.3914 94.4867 12.3861H93.2886V8.27604H94.4867C95.1432 8.27604 95.721 8.29865 96.2039 8.3431C96.6647 8.38601 97.0373 8.48373 97.3115 8.63353C97.5654 8.76636 97.771 8.97599 97.899 9.23259C98.03 9.49544 98.0964 9.86042 98.0964 10.3176C98.0964 10.7567 98.03 11.1124 97.8991 11.375ZM93.2886 15.739H95.0016C95.5989 15.7311 96.1958 15.7711 96.7868 15.8587C97.2456 15.9352 97.6085 16.0624 97.8654 16.2367C98.1065 16.3951 98.2912 16.626 98.393 16.8962C98.5101 17.2325 98.5657 17.5872 98.557 17.9433C98.557 18.4067 98.5019 18.7863 98.393 19.0715C98.2944 19.3363 98.1062 19.5581 97.8611 19.6983C97.5938 19.8574 97.2288 19.9727 96.7759 20.0409C96.1878 20.1192 95.5948 20.1548 95.0016 20.1473H93.2886V15.739Z" fill="#485559"/>
+<path d="M118.254 10.157C117.602 9.5447 116.806 9.109 115.939 8.89113C115.041 8.65313 114.005 8.53217 112.857 8.53217C111.71 8.53217 110.669 8.65292 109.762 8.89099C108.842 9.13326 108.058 9.55928 107.433 10.1571C106.808 10.7549 106.324 11.5646 105.99 12.5657C105.661 13.5569 105.493 14.8182 105.493 16.3145C105.493 17.8108 105.661 19.0721 105.99 20.0633C106.324 21.065 106.809 21.8754 107.433 22.4718C108.058 23.0701 108.842 23.4961 109.762 23.738C110.669 23.976 111.71 24.0968 112.857 24.0968C114.005 24.0968 115.041 23.9761 115.939 23.7378C116.806 23.5203 117.603 23.0845 118.254 22.4719C118.878 21.8748 119.364 21.0644 119.697 20.0633C120.027 19.0721 120.194 17.8109 120.194 16.3145C120.194 14.8181 120.027 13.5565 119.697 12.5657C119.364 11.5653 118.878 10.7549 118.254 10.157ZM114.299 20.5374C113.915 20.6744 113.43 20.7438 112.857 20.7438C112.284 20.7438 111.804 20.6745 111.43 20.5377C111.073 20.4113 110.767 20.1737 110.556 19.8597C110.328 19.5303 110.161 19.0751 110.057 18.5068C109.951 17.9235 109.898 17.1859 109.898 16.3145C109.888 15.58 109.937 14.846 110.045 14.1194C110.139 13.5524 110.302 13.0929 110.53 12.7539C110.743 12.4302 111.055 12.1834 111.418 12.0497C111.802 11.9045 112.287 11.8308 112.857 11.8308C113.427 11.8308 113.906 11.9043 114.281 12.0491C114.639 12.1871 114.945 12.4335 115.157 12.754C115.386 13.0932 115.554 13.5536 115.657 14.1223C115.763 14.7057 115.817 15.4433 115.817 16.3146C115.826 17.049 115.777 17.783 115.67 18.5096C115.575 19.0771 115.412 19.5316 115.185 19.8598C114.971 20.176 114.66 20.4138 114.299 20.5375V20.5374Z" fill="#485559"/>
+<path d="M130.652 12.2652V8.80368H127.618V5.33014H123.322V8.80368H121.398V12.2652H123.322V18.9469C123.322 19.9187 123.41 20.7384 123.585 21.3829C123.765 22.0459 124.06 22.5767 124.462 22.9604C124.865 23.3441 125.399 23.6148 126.051 23.7663C126.686 23.9132 127.47 23.9881 128.382 23.9881C128.711 23.9881 129.044 23.9741 129.373 23.9468C129.696 23.9198 130.008 23.8876 130.302 23.851L130.463 23.831V20.3971L130.237 20.4504C129.867 20.5267 129.491 20.5615 129.114 20.5539C128.848 20.5611 128.583 20.5316 128.325 20.4663C128.16 20.4239 128.011 20.3309 127.901 20.2003C127.781 20.0388 127.706 19.8489 127.683 19.6494C127.634 19.309 127.612 18.9653 127.618 18.6214V12.2654L130.652 12.2652Z" fill="#485559"/>
+<path d="M69.9428 25.1193L68.0201 26.5826C67.9148 26.6628 67.7948 26.7214 67.6669 26.755C67.5391 26.7887 67.4058 26.7969 67.2748 26.779C67.1438 26.7611 67.0176 26.7175 66.9034 26.6508C66.7892 26.584 66.6892 26.4954 66.6092 26.39L64.3819 23.4544C64.2203 23.2415 64.1498 22.973 64.1859 22.708C64.222 22.443 64.3618 22.2032 64.5744 22.0414L66.4971 20.5784C66.7097 20.4166 66.9778 20.346 67.2424 20.3822C67.507 20.4183 67.7464 20.5582 67.908 20.7712L70.1353 23.7067C70.2153 23.8122 70.2738 23.9324 70.3074 24.0604C70.3411 24.1885 70.3492 24.322 70.3313 24.4532C70.3134 24.5844 70.2699 24.7108 70.2033 24.8252C70.1366 24.9395 70.0481 25.0397 69.9428 25.1198V25.1193Z" fill="#485559"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_477_6686" x1="6.65018" y1="4.44097" x2="25.0992" y2="29.2491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B2F288"/>
+<stop offset="0.181" stop-color="#80D79C"/>
+<stop offset="0.371" stop-color="#52BEAD"/>
+<stop offset="0.554" stop-color="#2FAABB"/>
+<stop offset="0.724" stop-color="#159CC5"/>
+<stop offset="0.878" stop-color="#0594CB"/>
+<stop offset="1" stop-color="#0091CD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_477_6686" x1="6.65018" y1="4.44097" x2="25.0992" y2="29.2491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B2F288"/>
+<stop offset="0.181" stop-color="#80D79C"/>
+<stop offset="0.371" stop-color="#52BEAD"/>
+<stop offset="0.554" stop-color="#2FAABB"/>
+<stop offset="0.724" stop-color="#159CC5"/>
+<stop offset="0.878" stop-color="#0594CB"/>
+<stop offset="1" stop-color="#0091CD"/>
+</linearGradient>
+<clipPath id="clip0_477_6686">
+<rect width="131" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/assets/img/no-search_result.png b/frontend/src/assets/img/no-search_result.png
new file mode 100644
index 00000000..7bb97e87
Binary files /dev/null and b/frontend/src/assets/img/no-search_result.png differ
diff --git a/frontend/src/assets/model/icon_Azure_OpenAI_colorful.png b/frontend/src/assets/model/icon_Azure_OpenAI_colorful.png
new file mode 100644
index 00000000..470aec02
Binary files /dev/null and b/frontend/src/assets/model/icon_Azure_OpenAI_colorful.png differ
diff --git a/frontend/src/assets/model/icon_alybl_colorful.png b/frontend/src/assets/model/icon_alybl_colorful.png
new file mode 100644
index 00000000..5d70e94d
Binary files /dev/null and b/frontend/src/assets/model/icon_alybl_colorful.png differ
diff --git a/frontend/src/assets/model/icon_bdyzn_colorful.png b/frontend/src/assets/model/icon_bdyzn_colorful.png
new file mode 100644
index 00000000..bebaae39
Binary files /dev/null and b/frontend/src/assets/model/icon_bdyzn_colorful.png differ
diff --git a/frontend/src/assets/model/icon_deepseek_colorful.png b/frontend/src/assets/model/icon_deepseek_colorful.png
new file mode 100644
index 00000000..29b11250
Binary files /dev/null and b/frontend/src/assets/model/icon_deepseek_colorful.png differ
diff --git a/frontend/src/assets/model/icon_gemini_colorful.png b/frontend/src/assets/model/icon_gemini_colorful.png
new file mode 100644
index 00000000..de4cc23c
Binary files /dev/null and b/frontend/src/assets/model/icon_gemini_colorful.png differ
diff --git a/frontend/src/assets/model/icon_ollama_gray.png b/frontend/src/assets/model/icon_ollama_gray.png
new file mode 100644
index 00000000..08a6e17e
Binary files /dev/null and b/frontend/src/assets/model/icon_ollama_gray.png differ
diff --git a/frontend/src/assets/model/icon_openai_colorful.png b/frontend/src/assets/model/icon_openai_colorful.png
new file mode 100644
index 00000000..e6365e86
Binary files /dev/null and b/frontend/src/assets/model/icon_openai_colorful.png differ
diff --git a/frontend/src/assets/model/icon_txy_colorful.png b/frontend/src/assets/model/icon_txy_colorful.png
new file mode 100644
index 00000000..a6f17f81
Binary files /dev/null and b/frontend/src/assets/model/icon_txy_colorful.png differ
diff --git a/frontend/src/assets/model/icon_tyqw_colorful.png b/frontend/src/assets/model/icon_tyqw_colorful.png
new file mode 100644
index 00000000..3cc26b50
Binary files /dev/null and b/frontend/src/assets/model/icon_tyqw_colorful.png differ
diff --git a/frontend/src/assets/model/icon_wxyy_colorful.png b/frontend/src/assets/model/icon_wxyy_colorful.png
new file mode 100644
index 00000000..6e9d94ab
Binary files /dev/null and b/frontend/src/assets/model/icon_wxyy_colorful.png differ
diff --git a/frontend/src/assets/model/icon_xfhx_colorful.png b/frontend/src/assets/model/icon_xfhx_colorful.png
new file mode 100644
index 00000000..ad396f17
Binary files /dev/null and b/frontend/src/assets/model/icon_xfhx_colorful.png differ
diff --git a/frontend/src/assets/svg/icon-member-default.svg b/frontend/src/assets/svg/icon-member-default.svg
new file mode 100644
index 00000000..5444910e
--- /dev/null
+++ b/frontend/src/assets/svg/icon-member-default.svg
@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#1CBA90"/>
+<path d="M18.6667 16.4445H13.3333C10.8787 16.4445 8 18.1613 8 21.2445V23.6445C8 24.0863 8.39797 24.4445 8.88889 24.4445H23.1111C23.602 24.4445 24 24.0863 24 23.6445V21.2445C24 18.1587 21.1213 16.4445 18.6667 16.4445Z" fill="url(#paint0_linear_477_6741)"/>
+<path d="M11.5556 11.1111C11.5556 13.5657 13.5454 15.5556 16 15.5556C18.4546 15.5556 20.4444 13.5657 20.4444 11.1111C20.4444 8.65653 18.4546 6.66669 16 6.66669C13.5454 6.66669 11.5556 8.65653 11.5556 11.1111Z" fill="url(#paint1_linear_477_6741)"/>
+<defs>
+<linearGradient id="paint0_linear_477_6741" x1="16" y1="6.66669" x2="16" y2="24.8889" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_477_6741" x1="16" y1="6.66669" x2="16" y2="24.8889" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/assets/svg/icon_admin_outlined.svg b/frontend/src/assets/svg/icon_admin_outlined.svg
new file mode 100644
index 00000000..08447d7f
--- /dev/null
+++ b/frontend/src/assets/svg/icon_admin_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0098 4.08305C10.7508 5.08943 9.8372 5.83305 8.74996 5.83305C7.66272 5.83305 6.74916 5.08943 6.49014 4.08305H1.54053C1.41051 4.08305 1.36337 4.06951 1.31584 4.04409C1.26831 4.01867 1.231 3.98137 1.20558 3.93384C1.18016 3.88631 1.16663 3.83916 1.16663 3.70915V3.29028C1.16663 3.16027 1.18016 3.11312 1.20558 3.06559C1.231 3.01806 1.26831 2.98076 1.31584 2.95534C1.36337 2.92992 1.41051 2.91638 1.54053 2.91638H6.49014C6.74916 1.91 7.66272 1.16638 8.74996 1.16638C9.8372 1.16638 10.7508 1.91 11.0098 2.91638H12.4594C12.5894 2.91638 12.6366 2.92992 12.6841 2.95534C12.7316 2.98076 12.7689 3.01806 12.7943 3.06559C12.8198 3.11312 12.8333 3.16027 12.8333 3.29028V3.70915C12.8333 3.83916 12.8198 3.88631 12.7943 3.93384C12.7689 3.98137 12.7316 4.01867 12.6841 4.04409C12.6366 4.06951 12.5894 4.08305 12.4594 4.08305H11.0098ZM8.74996 4.66638C9.39429 4.66638 9.91663 4.14405 9.91663 3.49972C9.91663 2.85538 9.39429 2.33305 8.74996 2.33305C8.10563 2.33305 7.58329 2.85538 7.58329 3.49972C7.58329 4.14405 8.10563 4.66638 8.74996 4.66638Z" fill="#1F2329"/>
+<path d="M7.50978 11.083C7.25076 12.0894 6.3372 12.833 5.24996 12.833C4.16272 12.833 3.24916 12.0894 2.99014 11.083H1.54053C1.41051 11.083 1.36337 11.0695 1.31584 11.0441C1.26831 11.0187 1.231 10.9814 1.20558 10.9338C1.18016 10.8863 1.16663 10.8392 1.16663 10.7091V10.2903C1.16663 10.1603 1.18016 10.1131 1.20558 10.0656C1.231 10.0181 1.26831 9.98076 1.31584 9.95534C1.36337 9.92992 1.41051 9.91638 1.54053 9.91638H2.99014C3.24916 8.91 4.16272 8.16638 5.24996 8.16638C6.3372 8.16638 7.25076 8.91 7.50978 9.91638H12.4594C12.5894 9.91638 12.6366 9.92992 12.6841 9.95534C12.7316 9.98076 12.7689 10.0181 12.7943 10.0656C12.8198 10.1131 12.8333 10.1603 12.8333 10.2903V10.7091C12.8333 10.8392 12.8198 10.8863 12.7943 10.9338C12.7689 10.9814 12.7316 11.0187 12.6841 11.0441C12.6366 11.0695 12.5894 11.083 12.4594 11.083H7.50978ZM5.24996 11.6664C5.89429 11.6664 6.41663 11.144 6.41663 10.4997C6.41663 9.85538 5.89429 9.33305 5.24996 9.33305C4.60563 9.33305 4.08329 9.85538 4.08329 10.4997C4.08329 11.144 4.60563 11.6664 5.24996 11.6664Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_azure_openAI_colorful.svg b/frontend/src/assets/svg/icon_azure_openAI_colorful.svg
new file mode 100644
index 00000000..e5a2f98a
--- /dev/null
+++ b/frontend/src/assets/svg/icon_azure_openAI_colorful.svg
@@ -0,0 +1 @@
+<svg t="1724827784525" class="icon" viewBox="0 0 1083 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5331" width="100%" height="100%"><path d="M540.115607 419.535168L460.236208 3.644671 376.260809 1.620347c-31.825387-5.244301-54.020439 8.390289-66.588115 40.908208C297.107977 75.046474 194.101272 379.938035 0.654058 957.203237-1.245965 999.731792 12.341272 1020.99311 41.418728 1020.99311h275.015029c14.599399-4.010173 25.104277-17.02178 31.514636-39.031861 6.410358-22.010081 70.46659-209.486428 192.168694-562.427561z" fill="#0D559D" p-id="5332"></path><path d="M669.463676 658.929202l-351.23052 6.189873c-29.527306 6.969711-32.546035 22.615306-9.054705 46.941226 35.237734 36.486659 357.010497 317.661965 372.719722 311.580115 9.100578-3.52185 16.537896-4.005734 26.473064-9.14941 24.994775-12.939098 21.644578-70.568694-10.05059-172.887307l-28.855491-182.674497z" fill="#0078D4" p-id="5333"></path><path d="M371.417526 0.331468l350.216879-0.325549a47.405873 47.405873 0 0 1 31.042589 11.556994c7.219792 6.252023 13.292763 14.842081 18.220393 25.765734 9.603699 21.293873 112.287815 325.368601 308.052347 912.225665a54.729249 54.729249 0 0 1 1.284439 30.169526c-6.225387 25.780532-19.432324 39.509827-39.623768 41.181965-24.348116 2.018405-144.088046 2.962497-359.221272 2.833758 30.551306-9.66141 44.410821-28.275422 41.578543-55.843515C720.153156 940.511445 618.336185 634.30289 417.516763 49.264462h0.00296a84.346821 84.346821 0 0 0-13.869873-25.255213C392.112092 9.559306 382.194682 2.04652 373.893179 1.47237c-10.553711-0.728046-11.379422-1.109827-2.475653-1.140902z" fill="#2FA7E7" p-id="5334"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/icon_dataset_filled.svg b/frontend/src/assets/svg/icon_dataset_filled.svg
new file mode 100644
index 00000000..5f15a4de
--- /dev/null
+++ b/frontend/src/assets/svg/icon_dataset_filled.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833332 7.40037C0.833332 7.04018 1.20268 6.79815 1.53293 6.94194L8.77366 10.0945C8.95609 10.1739 9.07406 10.3539 9.07406 10.5529V18.339C9.07406 18.7151 8.67437 18.9566 8.34143 18.7816L1.14374 14.9982C1.05097 14.9474 0.973518 14.8737 0.919075 14.7847C0.864631 14.6956 0.835098 14.5943 0.833414 14.4907L0.833332 14.4814V7.40037ZM18.4645 6.9322C18.795 6.78604 19.1667 7.02807 19.1667 7.38949V14.4814C19.1666 14.5866 19.1379 14.6899 19.0834 14.7807C19.0288 14.8715 18.9504 14.9466 18.8563 14.9982L11.6586 18.7816C11.3256 18.9566 10.9259 18.7151 10.9259 18.339L10.9259 10.5912C10.9259 10.3932 11.0427 10.2139 11.2237 10.1339L18.4645 6.9322ZM9.6999 1.74337C9.79149 1.69312 9.89485 1.66672 10 1.66672C10.1051 1.66672 10.2085 1.69312 10.3001 1.74337L17.1981 4.80724C17.5963 4.9841 17.5934 5.55021 17.1935 5.72313L10.1984 8.74754C10.0718 8.80229 9.92819 8.80229 9.80157 8.74754L2.80646 5.72313C2.40653 5.55021 2.40373 4.9841 2.80193 4.80724L9.6999 1.74337Z"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_done_outlined.svg b/frontend/src/assets/svg/icon_done_outlined.svg
new file mode 100644
index 00000000..ede53c1e
--- /dev/null
+++ b/frontend/src/assets/svg/icon_done_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.14507 11.6067L13.4518 4.2999C13.582 4.16973 13.7931 4.16973 13.9232 4.2999L14.3946 4.77131C14.5248 4.90148 14.5248 5.11254 14.3946 5.24271L6.38077 13.2566C6.25059 13.3868 6.03954 13.3868 5.90936 13.2566L1.66672 9.01395C1.53655 8.88377 1.53655 8.67272 1.66672 8.54254L2.13813 8.07114C2.2683 7.94096 2.47936 7.94096 2.60953 8.07114L6.14507 11.6067Z" fill="#1CBA90"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_moments-categories_outlined.svg b/frontend/src/assets/svg/icon_moments-categories_outlined.svg
new file mode 100644
index 00000000..a7226e4b
--- /dev/null
+++ b/frontend/src/assets/svg/icon_moments-categories_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.17896 1.78057L14.8914 6.05213C15.0972 6.18312 15.0972 6.48359 14.8914 6.61457L8.17896 10.8861C8.06977 10.9556 7.93023 10.9556 7.82104 10.8861L1.10858 6.61457C0.902751 6.48359 0.90275 6.18312 1.10858 6.05213L7.82104 1.78057C7.93023 1.71108 8.06977 1.71108 8.17896 1.78057ZM3.15017 6.33335L8 9.41961L12.8498 6.33335L8 3.2471L3.15017 6.33335Z" fill="#1F2329"/>
+<path d="M1.73096 9.25743C1.57401 9.1612 1.36878 9.21042 1.27255 9.36736L0.924074 9.9357C0.827845 10.0926 0.877063 10.2979 1.03401 10.3941L7.13744 14.1364C7.56569 14.399 8.10095 14.399 8.52919 14.1364L14.6326 10.3941C14.7896 10.2979 14.8388 10.0926 14.7426 9.9357L14.3941 9.36736C14.2979 9.21042 14.0926 9.1612 13.9357 9.25743L7.92044 12.9457C7.86698 12.9784 7.79965 12.9784 7.7462 12.9457L1.73096 9.25743Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_side-expand_outlined.svg b/frontend/src/assets/svg/icon_side-expand_outlined.svg
new file mode 100644
index 00000000..f242724e
--- /dev/null
+++ b/frontend/src/assets/svg/icon_side-expand_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.08329 3.33331H16.25C16.4801 3.33331 16.6666 3.51986 16.6666 3.74998V4.58331C16.6666 4.81343 16.4801 4.99998 16.25 4.99998H2.08329C1.85317 4.99998 1.66663 4.81343 1.66663 4.58331V3.74998C1.66663 3.51986 1.85317 3.33331 2.08329 3.33331ZM2.08329 15H16.25C16.4801 15 16.6666 15.1865 16.6666 15.4166V16.25C16.6666 16.4801 16.4801 16.6666 16.25 16.6666H2.08329C1.85317 16.6666 1.66663 16.4801 1.66663 16.25V15.4166C1.66663 15.1865 1.85317 15 2.08329 15ZM2.08329 9.16665H11.25C11.4801 9.16665 11.6666 9.35319 11.6666 9.58331V10.4166C11.6666 10.6468 11.4801 10.8333 11.25 10.8333H2.08329C1.85317 10.8333 1.66663 10.6468 1.66663 10.4166V9.58331C1.66663 9.35319 1.85317 9.16665 2.08329 9.16665Z" fill="#1F2329"/>
+<path d="M17.8422 10.256C17.8006 10.3251 17.7427 10.383 17.6736 10.4246L14.1369 12.5566C13.9024 12.6979 13.5977 12.6224 13.4564 12.3879C13.4098 12.3107 13.3852 12.2222 13.3852 12.132L13.3851 7.86795C13.3851 7.59416 13.6071 7.37221 13.8808 7.3722C13.971 7.3722 14.0595 7.39681 14.1368 7.44338L17.6736 9.57549C17.9081 9.71684 17.9836 10.0215 17.8422 10.256Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_side-fold_outlined.svg b/frontend/src/assets/svg/icon_side-fold_outlined.svg
new file mode 100644
index 00000000..86832bca
--- /dev/null
+++ b/frontend/src/assets/svg/icon_side-fold_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.69818 3.33331H17.8648C18.095 3.33331 18.2815 3.51986 18.2815 3.74998V4.58331C18.2815 4.81343 18.095 4.99998 17.8648 4.99998H3.69818C3.46806 4.99998 3.28151 4.81343 3.28151 4.58331V3.74998C3.28151 3.51986 3.46806 3.33331 3.69818 3.33331ZM3.69818 15H17.8648C18.095 15 18.2815 15.1865 18.2815 15.4166V16.25C18.2815 16.4801 18.095 16.6666 17.8648 16.6666H3.69818C3.46806 16.6666 3.28151 16.4801 3.28151 16.25V15.4166C3.28151 15.1865 3.46806 15 3.69818 15ZM8.69818 9.16665H17.8648C18.095 9.16665 18.2815 9.35319 18.2815 9.58331V10.4166C18.2815 10.6468 18.095 10.8333 17.8648 10.8333H8.69818C8.46806 10.8333 8.28151 10.6468 8.28151 10.4166V9.58331C8.28151 9.35319 8.46806 9.16665 8.69818 9.16665Z" fill="#1F2329"/>
+<path d="M1.73792 10.256C1.77957 10.3251 1.83746 10.383 1.90655 10.4246L5.44325 12.5566C5.67773 12.6979 5.98239 12.6224 6.12374 12.3879C6.1703 12.3107 6.19491 12.2222 6.19491 12.132L6.19501 7.86796C6.19502 7.59417 5.97307 7.37222 5.69929 7.37221C5.60908 7.37221 5.52059 7.39682 5.44333 7.44339L1.90654 9.5755C1.67207 9.71685 1.59657 10.0215 1.73792 10.256Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/components/layout/LayoutDsl.vue b/frontend/src/components/layout/LayoutDsl.vue
new file mode 100644
index 00000000..5acfa145
--- /dev/null
+++ b/frontend/src/components/layout/LayoutDsl.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Menu from './Menu.vue'
+import LOGO from '@/assets/LOGO.svg'
+import LOGO_fold from '@/assets/LOGO-fold.svg'
+import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
+import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
+import Default_avatar from '@/assets/svg/icon-member-default.svg'
+import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
+const collapse = ref(false)
+
+const handleFoldExpand = () => {
+  collapse.value = !collapse.value
+}
+</script>
+
+<template>
+  <div class="system-layout">
+    <div class="left-side" :class="collapse && 'left-side-collapse'">
+      <LOGO_fold v-if="collapse" style="margin: 0 0 6px 5px"></LOGO_fold>
+      <LOGO v-else style="margin-bottom: 6px"></LOGO>
+      <Menu :collapse="collapse"></Menu>
+      <div class="bottom">
+        <div class="back-to_workspace">
+          <el-icon size="16">
+            <icon_moments_categories_outlined></icon_moments_categories_outlined>
+          </el-icon>
+          {{ collapse ? '' : '返回工作空间' }}
+        </div>
+        <div class="personal-info">
+          <el-icon size="32" class="default-avatar">
+            <Default_avatar></Default_avatar>
+          </el-icon>
+
+          {{ collapse ? '' : '飞小致' }}
+          <el-icon @click="handleFoldExpand" size="20" class="fold">
+            <icon_side_expand_outlined v-if="collapse"></icon_side_expand_outlined>
+            <icon_side_fold_outlined v-else></icon_side_fold_outlined>
+          </el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="right-main">
+      <div class="content">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.system-layout {
+  width: 100vw;
+  height: 100vh;
+  background-color: #f1f4f3;
+  display: flex;
+
+  @keyframes rotate {
+    0% {
+      width: 240px;
+    }
+    100% {
+      width: 64px;
+    }
+  }
+
+  .left-side {
+    width: 240px;
+    height: 100%;
+    padding: 16px;
+    position: relative;
+
+    .bottom {
+      position: absolute;
+      bottom: 20px;
+      left: 16px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      width: calc(100% - 32px);
+      .back-to_workspace {
+        background-color: #1f23290a;
+        border: 1px solid #d0d3d6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        height: 40px;
+        cursor: pointer;
+
+        .ed-icon {
+          margin-right: 4.95px;
+        }
+      }
+
+      .personal-info {
+        display: flex;
+        align-items: center;
+        margin-top: 16px;
+        .default-avatar {
+          margin-right: 8px;
+          cursor: pointer;
+        }
+
+        .fold {
+          cursor: pointer;
+          margin-left: auto;
+        }
+      }
+    }
+
+    &.left-side-collapse {
+      width: 64px;
+      padding: 16px 12px;
+      animation: rotate 1s ease-in-out;
+
+      .ed-menu--collapse {
+        --ed-menu-icon-width: 32px;
+        width: 40px;
+      }
+
+      .bottom {
+        left: 12px;
+        width: calc(100% - 24px);
+        .ed-icon {
+          margin-right: 0;
+        }
+      }
+
+      .personal-info {
+        flex-wrap: wrap;
+
+        .default-avatar {
+          margin: 0 0 26px 4px;
+        }
+
+        .fold {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
+  .right-main {
+    flex: 1;
+    padding: 8px 8px 8px 0;
+    max-height: 100vh;
+
+    .content {
+      width: 100%;
+      height: 100%;
+      padding: 16px 24px;
+      box-shadow: 0px 2px 4px 0px #1f23291f;
+      background-color: #fff;
+      border-radius: 12px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/components/layout/Menu.vue b/frontend/src/components/layout/Menu.vue
new file mode 100644
index 00000000..0cb63e40
--- /dev/null
+++ b/frontend/src/components/layout/Menu.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { ElMenu } from 'element-plus-secondary'
+import { useRoute } from 'vue-router'
+import MenuItem from './MenuItem.vue'
+
+defineProps({
+  collapse: Boolean,
+})
+
+const route = useRoute()
+const menuList = computed(() => route.matched[0]?.children || [])
+
+const activeIndex = computed(() => {
+  const arr = route.path.split('/')
+  return arr[arr.length - 1]
+})
+</script>
+
+<template>
+  <el-menu :default-active="activeIndex" class="ed-menu-vertical" :collapse="collapse">
+    <MenuItem v-for="menu in menuList" :key="menu.path" :menu="menu"></MenuItem>
+  </el-menu>
+</template>
+
+<style lang="less" scoped>
+.ed-menu-vertical {
+  --ed-menu-item-height: 40px;
+  --ed-menu-bg-color: transparent;
+  --ed-menu-base-level-padding: 4px;
+  border-right: none;
+  .ed-menu-item {
+    height: 40px;
+    border-radius: 6px;
+    &.is-active.is-active.is-active {
+      background-color: #1CBA901A;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/components/layout/MenuItem.vue b/frontend/src/components/layout/MenuItem.vue
new file mode 100644
index 00000000..506ce9e2
--- /dev/null
+++ b/frontend/src/components/layout/MenuItem.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+import { h } from 'vue'
+import { ElMenuItem, ElSubMenu, ElIcon } from 'element-plus-secondary'
+
+import model from '@/assets/svg/icon_dataset_filled.svg'
+
+const iconMap = {
+  icon_ai: model,
+} as { [key: string]: any }
+
+const titleWithIcon = (props: any) => {
+  const { title, icon } = props.menu?.meta || {}
+  return [
+    h(ElIcon, null, { default: () => h(iconMap[icon]) }),
+    h('span', null, { default: () => title }),
+  ]
+}
+
+const MenuItem = (props: any) => {
+  const { children, hidden, path } = props.menu
+  if (hidden) {
+    return null
+  }
+  if (children?.length) {
+    return h(
+      ElSubMenu,
+      { index: path },
+      {
+        title: () => titleWithIcon(props),
+        default: () => children.map((ele: any) => h(MenuItem, { menu: ele })),
+      }
+    )
+  }
+  const { title, icon } = props.menu?.meta || {}
+  const iconCom: any = iconMap[icon] ? ElIcon : null
+  return h(
+    ElMenuItem,
+    { index: path },
+    {
+      title: h('span', null, { default: () => title }),
+      default: h(iconCom, null, {
+        default: () => h(iconMap[icon]),
+      }),
+    }
+  )
+}
+export default MenuItem
+</script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d818ecc4..21579f32 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Layout from '@/components/layout/index.vue'
+import LayoutDsl from '@/components/layout/LayoutDsl.vue'
 import SinglePage from '@/components/layout/SinglePage.vue'
 import login from '@/views/login/index.vue'
 import chat from '@/views/chat/index.vue'
@@ -8,7 +9,8 @@ import ds from '@/views/ds/index.vue'
 import DashboardEditor from '@/views/dashboard/editor/index.vue'
 import DashboardPreview from '@//views/dashboard/preview/SQPreviewSingle.vue'
 import Dashboard from '@/views/dashboard/index.vue'
-import Model from '@/views/system/model/index.vue'
+// import Model from '@/views/system/model/index.vue'
+import Model from '@/views/system/model/Model.vue'
 // import User from "@/views/system/user/index.vue";
 import { watchRouter } from './watch'
 const router = createRouter({
@@ -95,17 +97,30 @@ const router = createRouter({
         },
       ],
     }, */
+    // {
+    //   path: '/system',
+    //   component: Layout,
+    //   redirect: '/system/model',
+    //   children: [
+    //     /*  {
+    //       path: "user",
+    //       name: "user",
+    //       component: User,
+    //       meta: { title: "User Management", icon: "icon_user" },
+    //     }, */
+    //     {
+    //       path: 'model',
+    //       name: 'model',
+    //       component: Model,
+    //       meta: { title: 'AI Model Configuration', icon: 'icon_ai' },
+    //     },
+    //   ],
+    // },
     {
       path: '/system',
-      component: Layout,
+      component: LayoutDsl,
       redirect: '/system/model',
       children: [
-        /*  {
-          path: "user",
-          name: "user",
-          component: User,
-          meta: { title: "User Management", icon: "icon_user" },
-        }, */
         {
           path: 'model',
           name: 'model',
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 7782fbd2..436f7f21 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -3,7 +3,6 @@
   line-height: 1.5;
   font-weight: 400;
 
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -26,7 +25,7 @@
   --border-radius: 8px;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
-  --el-color-primary: #1cba90 !important;
+  --ed-color-primary: #1cba90 !important;
 }
 
 a {
@@ -111,7 +110,6 @@ body {
   border-radius: 8px !important;
 }
 
-
 .hover-icon {
   cursor: pointer;
   height: 24px !important;
@@ -145,3 +143,9 @@ body {
   top: 0;
   z-index: 100;
 }
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/frontend/src/views/system/model/Card.vue b/frontend/src/views/system/model/Card.vue
new file mode 100644
index 00000000..5ce7cd5d
--- /dev/null
+++ b/frontend/src/views/system/model/Card.vue
@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import azure from '@/assets/model/icon_Azure_OpenAI_colorful.png'
+import delIcon from '@/assets/svg/icon_delete.svg'
+import edit from '@/assets/svg/icon_edit_outlined.svg'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    modleType: string
+    baseModle: string
+    id?: string
+    isDefault?: boolean
+  }>(),
+  {
+    name: '-',
+    modleType: '-',
+    baseModle: '-',
+    id: '-',
+    isDefault: false,
+  }
+)
+
+const emits = defineEmits(['edit', 'del'])
+
+const handleEdit = () => {
+  emits('edit', props.id)
+}
+
+const handleDel = () => {
+  emits('del', props.id)
+}
+</script>
+
+<template>
+  <div class="card">
+    <div class="name-icon">
+      <img :src="azure" width="32px" height="32px" />
+      <span class="name">{{ name }}</span>
+      <span class="default">默认模型</span>
+    </div>
+    <div class="type-value">
+      <span class="type">模型类型</span>
+      <span class="value"> {{ modleType }}</span>
+    </div>
+    <div class="type-value">
+      <span class="type">基础模型</span>
+      <span class="value"> {{ baseModle }}</span>
+    </div>
+    <div class="methods">
+      <el-tooltip :offset="14" effect="dark" content="编辑" placement="top">
+        <el-icon @click="handleEdit" size="16">
+          <edit></edit>
+        </el-icon>
+      </el-tooltip>
+      <template v-if="!isDefault">
+        <span class="divide"></span>
+        <el-tooltip :offset="14" effect="dark" content="删除" placement="top">
+          <el-icon @click="handleDel" size="16">
+            <delIcon></delIcon>
+          </el-icon>
+        </el-tooltip>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card {
+  width: 404px;
+  height: 160px;
+  border: 1px solid #dee0e3;
+  padding: 16px;
+  border-radius: 12px;
+  margin: 0 16px 16px 0;
+  &:hover {
+    box-shadow: 0px 6px 24px 0px #1f232914;
+  }
+
+  .name-icon {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    .name {
+      margin-left: 12px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+    .default {
+      margin-left: auto;
+      background: #1cba9033;
+      padding: 0 4px;
+      border-radius: 4px;
+      color: #189e7a;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+
+  .type-value {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    .type {
+      color: #646a73;
+    }
+
+    .value {
+      margin-left: 16px;
+    }
+  }
+
+  .methods {
+    margin-top: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    display: none;
+
+    .ed-icon {
+      position: relative;
+      cursor: pointer;
+
+      &::after {
+        content: '';
+        background-color: #1f23291a;
+        position: absolute;
+        border-radius: 6px;
+        width: 24px;
+        height: 24px;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        display: none;
+      }
+
+      &:hover {
+        &::after {
+          display: block;
+        }
+      }
+    }
+
+    .divide {
+      height: 14px;
+      width: 1px;
+      background-color: #1f232926;
+      margin: 0 12px;
+    }
+  }
+
+  &:hover {
+    .methods {
+      display: flex;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/model/Model.vue b/frontend/src/views/system/model/Model.vue
new file mode 100644
index 00000000..fb465679
--- /dev/null
+++ b/frontend/src/views/system/model/Model.vue
@@ -0,0 +1,425 @@
+<script lang="ts" setup>
+import { ref, computed, shallowRef, reactive, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import icon_Azure_OpenAI_colorful from '@/assets/model/icon_Azure_OpenAI_colorful.png'
+import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
+import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
+import ModelList from './ModelList.vue'
+import ModelListSide from './ModelListSide.vue'
+import ModelForm from './ModelForm.vue'
+import { modelApi } from '@/api/system'
+import Card from './Card.vue'
+import { getModelTypeName } from '@/entity/CommonEntity.ts'
+
+interface Model {
+  name: string
+  type: string
+  baseModle: string
+  id?: string
+}
+
+const keywords = ref('')
+const defaultModelKeywords = ref('')
+const modelConfigvVisible = ref(false)
+const editModel = ref(false)
+const activeStep = ref(0)
+const activeName = ref('')
+const modelFormRef = ref()
+
+const state = reactive({
+  form: {
+    id: '',
+    name: '',
+    type: 0,
+    api_key: '',
+    endpoint: '',
+    max_context_window: 0,
+    temperature: 0,
+    status: false,
+    description: '',
+  },
+  pageInfo: {
+    currentPage: 1,
+    pageSize: 20,
+    total: 0,
+  },
+  selectedIds: [],
+})
+const modelList = shallowRef([] as Model[])
+const defaultModelList = shallowRef([
+  {
+    img: icon_Azure_OpenAI_colorful,
+    name: '千帆大模型-chinese',
+  },
+] as (Model & { img: string })[])
+
+const currentDefaultModel = ref('')
+const modelListWithSearch = computed(() => {
+  if (!keywords.value) return modelList.value
+  return modelList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
+  )
+})
+const beforeClose = () => {
+  modelConfigvVisible.value = false
+  ElMessage.success('设置成功')
+  ElMessageBox.confirm('是否设置 Azure OpenAI 123 为系统默认模型？', {
+    confirmButtonType: 'primary',
+    tip: '系统默认模型被替换后，智能问数的结果将会受到影响，请谨慎操作。',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  })
+  ElMessageBox.confirm('是否设置 Azure OpenAI 123 为系统默认模型？', {
+    confirmButtonType: 'danger',
+    confirmButtonText: '删除',
+    cancelButtonText: '取消',
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  })
+}
+const defaultModelListWithSearch = computed(() => {
+  if (!defaultModelKeywords.value) return defaultModelList.value
+  return defaultModelList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(defaultModelKeywords.value.toLowerCase())
+  )
+})
+
+const handleDefaultModelChange = (item: any) => {
+  currentDefaultModel.value = item.name
+}
+
+const formatKeywords = (item: string) => {
+  if (!defaultModelKeywords.value) return item
+  return item.replaceAll(
+    defaultModelKeywords.value,
+    `<span class="isSearch">${defaultModelKeywords.value}</span>`
+  )
+}
+
+const handleEditModel = (id: any) => {
+  activeStep.value = 1
+  modelApi.query(id).then((res: any) => {
+    modelConfigvVisible.value = true
+    nextTick(() => {
+      modelFormRef.value.initForm({ ...res, temperature: res.temperature * 100 })
+    })
+  })
+}
+
+const deleteHandler = (id: any) => {
+  ElMessageBox.confirm('Are you sure to delete?', 'Warning', {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+  })
+    .then(() => {
+      modelApi.delete(id).then(() => {
+        ElMessage({
+          type: 'success',
+          message: 'Delete completed',
+        })
+        search()
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: 'Delete canceled',
+      })
+    })
+}
+
+const clickModel = (ele: any) => {
+  activeStep.value = 1
+  activeName.value = ele.name
+}
+
+const clickModelSide = (ele: any) => {
+  activeName.value = ele.name
+}
+
+const cancel = () => {
+  beforeClose()
+}
+
+const preStep = () => {
+  activeStep.value = 0
+}
+
+const saveModel = () => {
+  modelFormRef.value.submit()
+}
+
+const search = () => {
+  modelApi.pager(state.pageInfo.currentPage, state.pageInfo.pageSize).then((res: any) => {
+    modelList.value = res.items
+    state.pageInfo.total = res.total
+  })
+}
+search()
+
+const submit = (item: any) => {
+  if (!item.id) {
+    modelApi.add(item).then(() => {
+      beforeClose()
+      search()
+      ElMessage({
+        type: 'success',
+        message: 'Add completed',
+      })
+    })
+    return
+  }
+  modelApi.edit(item).then(() => {
+    beforeClose()
+    search()
+    ElMessage({
+      type: 'success',
+      message: 'Edit completed',
+    })
+  })
+}
+</script>
+
+<template>
+  <div class="model-config">
+    <div class="model-methods">
+      <span class="title">AI 模型配置</span>
+      <div class="button-input">
+        <el-input
+          clearable
+          v-model="keywords"
+          style="width: 240px; margin-right: 12px"
+          placeholder="搜索"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined class="svg-icon" />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-popover popper-class="system-default_model" placement="bottom">
+          <template #reference>
+            <el-button secondary>
+              <template #icon>
+                <icon_admin_outlined></icon_admin_outlined>
+              </template>
+              系统默认模型
+            </el-button></template
+          >
+          <div class="popover">
+            <el-input
+              clearable
+              v-model="defaultModelKeywords"
+              style="width: 100%; margin-right: 12px"
+              placeholder="通过名称搜索"
+            >
+              <template #prefix>
+                <el-icon>
+                  <icon_searchOutline_outlined class="svg-icon" />
+                </el-icon>
+              </template>
+            </el-input>
+            <div class="popover-content">
+              <div
+                class="popover-item"
+                :class="currentDefaultModel === ele.name && 'isActive'"
+                v-for="ele in defaultModelListWithSearch"
+                :key="ele.name"
+                @click="handleDefaultModelChange(ele)"
+              >
+                <img :src="ele.img" width="24px" height="24px" />
+                <div class="model-name" v-html="formatKeywords(ele.name)"></div>
+                <el-icon size="16" class="done">
+                  <icon_done_outlined></icon_done_outlined>
+                </el-icon>
+              </div>
+              <div v-if="!defaultModelListWithSearch.length" class="popover-item empty">
+                没有找到相关结果
+              </div>
+            </div>
+          </div>
+        </el-popover>
+
+        <el-button type="primary">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          添加模型
+        </el-button>
+      </div>
+    </div>
+    <EmptyBackground
+      v-if="!!keywords && !modelListWithSearch.length"
+      :description="'没有找到相关内容'"
+      img-type="tree"
+    />
+
+    <div v-else class="card-content">
+      <Card
+        v-for="ele in modelListWithSearch"
+        :name="ele.name"
+        :modleType="getModelTypeName(ele.type)"
+        :baseModle="ele.baseModle"
+        :id="ele.id"
+        @edit="handleEditModel"
+        @del="deleteHandler"
+      ></Card>
+    </div>
+    <el-drawer
+      :close-on-click-modal="false"
+      size="calc(100% - 100px)"
+      modal-class="model-drawer-fullscreen"
+      direction="btt"
+      :before-close="beforeClose"
+      :show-close="false"
+      v-model="modelConfigvVisible"
+    >
+      <template #header="{ close }">
+        <span style="white-space: nowrap">添加模型</span>
+        <div v-if="!editModel" class="flex-center" style="width: 100%">
+          <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
+            <el-step>
+              <template #title> 选择供应商 </template>
+            </el-step>
+            <el-step>
+              <template #title> 添加模型 </template>
+            </el-step>
+          </el-steps>
+        </div>
+        <el-icon @click="close" style="cursor: pointer">
+          <icon_close_outlined></icon_close_outlined>
+        </el-icon>
+      </template>
+      <ModelList v-if="activeStep === 0" @clickModel="clickModel"></ModelList>
+      <ModelListSide
+        :activeName="activeName"
+        v-if="activeStep === 1"
+        @clickModel="clickModelSide"
+      ></ModelListSide>
+      <ModelForm
+        @submit="submit"
+        ref="modelFormRef"
+        :activeName="activeName"
+        v-if="activeStep === 1"
+      ></ModelForm>
+      <template #footer>
+        <el-button @click="cancel" secondary> 取消 </el-button>
+        <el-button @click="preStep" secondary> 上一步 </el-button>
+        <el-button @click="saveModel" type="primary"> 保存 </el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.model-config {
+  height: calc(100% - 16px);
+  .model-methods {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .card-content {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="less">
+.system-default_model.system-default_model {
+  padding: 4px 0;
+  width: 325px !important;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border: 1px solid #dee0e3;
+  .ed-input {
+    .ed-input__wrapper {
+      box-shadow: none;
+    }
+
+    border-bottom: 1px solid #1f232926;
+  }
+
+  .popover {
+    .popover-content {
+      padding: 4px;
+    }
+    .popover-item {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      padding-right: 8px;
+      margin-bottom: 2px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      &:not(.empty):hover {
+        background: #1f23291a;
+      }
+
+      &.empty {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #8f959e;
+        cursor: default;
+      }
+
+      .model-name {
+        margin-left: 8px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .done {
+        margin-left: auto;
+        display: none;
+      }
+
+      .isSearch {
+        color: var(--ed-color-primary);
+      }
+
+      &.isActive {
+        color: var(--ed-color-primary);
+
+        .done {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.model-drawer-fullscreen {
+  .ed-drawer__body {
+    padding: 0;
+  }
+  .is-process .ed-step__line {
+    background-color: var(--ed-color-primary);
+  }
+}
+.confirm-no_icon {
+  border-radius: 12px;
+  padding: 24px;
+  .tip {
+    margin-top: 24px;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/model/ModelForm.vue b/frontend/src/views/system/model/ModelForm.vue
new file mode 100644
index 00000000..2a94544b
--- /dev/null
+++ b/frontend/src/views/system/model/ModelForm.vue
@@ -0,0 +1,360 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import arrow_down from '@/assets/svg/arrow-down.svg'
+import dashboard_info from '@/assets/svg/dashboard-info.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_delete from '@/assets/svg/icon_delete.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import ParamsForm from './ParamsForm.vue'
+import { modelTypeOptions } from '@/entity/CommonEntity.ts'
+
+withDefaults(
+  defineProps<{
+    activeName: string
+  }>(),
+  {
+    activeName: '',
+  }
+)
+
+interface Options {
+  label: string
+  value: string
+}
+
+interface ParamsForm {
+  name: string
+  id: string
+}
+
+const modelForm = reactive({
+  id: '',
+  name: '',
+  type: 0,
+  api_key: '',
+  endpoint: '',
+  max_context_window: 0,
+  temperature: 0,
+  status: false,
+  description: '',
+})
+let isCreate = false
+const modelRef = ref()
+const paramsFormRef = ref()
+const advancedSetting = ref([] as ParamsForm[])
+const modelList = ref([] as Options[])
+const paramsFormDrawer = ref(false)
+const advancedSettingExpand = ref(false)
+
+const handleParamsEdite = (ele?: any) => {
+  isCreate = false
+  paramsFormDrawer.value = true
+  nextTick(() => {
+    paramsFormRef.value.initForm(ele)
+  })
+}
+
+const handleParamsCreate = () => {
+  isCreate = true
+  paramsFormDrawer.value = true
+  nextTick(() => {
+    paramsFormRef.value.initForm()
+  })
+}
+
+const handleParamsDel = (item: any) => {
+  advancedSetting.value = advancedSetting.value.filter((ele) => ele.name !== item.name)
+}
+
+const rules = {
+  type: [
+    {
+      required: true,
+      message: 'type',
+      trigger: 'change',
+    },
+  ],
+  endpoint: [{ required: true, message: 'endpoint', trigger: 'blur' }],
+  modelName: [{ required: true, message: '请选择基础模型', trigger: 'blur' }],
+  name: [{ required: true, message: '请给基础模型设置一个名称', trigger: 'blur' }],
+  api_key: [{ required: true, message: 'api_key', trigger: 'blur' }],
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    modelRef.value.clearValidate()
+  }, 100)
+})
+
+const addParams = () => {
+  paramsFormRef.value.submit()
+}
+
+const submit = (item: any) => {
+  if (isCreate) {
+    advancedSetting.value.push({ ...item })
+    cancel()
+    return
+  }
+  for (const key in advancedSetting.value) {
+    const element = advancedSetting.value[key]
+    if (element.id === item.id) {
+      Object.assign(element, { ...item })
+    }
+  }
+
+  cancel()
+}
+
+const cancel = () => {
+  paramsFormDrawer.value = false
+}
+
+const initForm = (item: any) => {
+  modelForm.id = ''
+  modelRef.value.clearValidate()
+  Object.assign(modelForm, { ...item })
+}
+const emits = defineEmits(['submit'])
+
+const submitModle = () => {
+  modelRef.value.validate((res: any) => {
+    if (res) {
+      emits('submit', {
+        ...modelForm,
+        temperature: modelForm.temperature / 100,
+        advancedSetting: [...advancedSetting.value],
+      })
+    }
+  })
+}
+
+defineExpose({
+  initForm,
+  submitModle,
+})
+</script>
+
+<template>
+  <div class="model-form">
+    <div class="model-name">{{ activeName }}</div>
+    <div class="form-content">
+      <el-form
+        ref="modelRef"
+        :rules="rules"
+        label-position="top"
+        :model="modelForm"
+        style="width: 100%"
+      >
+        <el-form-item class="custom-require flex-inline" prop="name">
+          <template #label
+            ><span class="custom-require_danger">模型名称</span>
+            <el-tooltip effect="dark" content="自定义的模型名称" placement="right">
+              <el-icon style="margin-left: 4px" size="16">
+                <dashboard_info></dashboard_info>
+              </el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="modelForm.name" />
+        </el-form-item>
+        <el-form-item prop="type" label="模型类型">
+          <el-select v-model="modelForm.type" style="width: 100%">
+            <el-option
+              v-for="item in modelTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="custom-require" prop="modelName">
+          <template #label
+            ><span class="custom-require_danger">基础模型</span>
+            <span class="enter">列表中未列出的模型，直接输入模型名称，回车即可添加</span>
+          </template>
+          <el-select v-model="modelForm.type" style="width: 100%">
+            <el-option
+              v-for="item in modelList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="endpoint" label="API 域名">
+          <el-input v-model="modelForm.endpoint" />
+        </el-form-item>
+        <el-form-item prop="api_key" label="API Key">
+          <el-input type="password" show-password v-model="modelForm.api_key" />
+        </el-form-item>
+      </el-form>
+      <div
+        @click="advancedSettingExpand = !advancedSettingExpand"
+        class="advance-setting"
+        :class="advancedSettingExpand && 'expand'"
+      >
+        高级设置
+        <el-icon size="16">
+          <arrow_down></arrow_down>
+        </el-icon>
+      </div>
+      <div v-if="advancedSettingExpand" class="model-params">
+        模型参数
+        <span @click="handleParamsCreate" class="add">
+          <el-icon size="16">
+            <icon_add_outlined></icon_add_outlined>
+          </el-icon>
+          添加
+        </span>
+      </div>
+
+      <div v-if="advancedSettingExpand" class="params-table">
+        <el-table :data="advancedSetting" style="width: 100%">
+          <el-table-column prop="params" label="参数" width="280" />
+          <el-table-column prop="name" label="显示名称" width="280" />
+          <el-table-column prop="value" label="参数值" />
+          <el-table-column fixed="right" width="80" class-name="operation-column_text" label="操作">
+            <template #default="scope">
+              <el-button text @click="handleParamsEdite(scope.row)" type="primary">
+                <el-icon size="16">
+                  <icon_edit_outlined></icon_edit_outlined>
+                </el-icon>
+              </el-button>
+              <el-button text @click="handleParamsDel(scope.row)" type="primary">
+                <el-icon size="16">
+                  <icon_delete></icon_delete>
+                </el-icon>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-drawer :size="600" v-model="paramsFormDrawer" title="添加参数">
+      <ParamsForm @submit="submit" ref="paramsFormRef"></ParamsForm>
+      <template #footer>
+        <el-button @click="cancel" secondary> 取消 </el-button>
+        <el-button @click="addParams" type="primary"> 添加 </el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.model-form {
+  width: calc(100% - 280px);
+  position: absolute;
+  right: 0;
+  top: 56px;
+  height: 100%;
+  .model-name {
+    height: 56px;
+    width: 100%;
+    padding-left: 24px;
+    border-bottom: 1px solid #1f232926;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+  }
+  .form-content {
+    width: 800px;
+    margin: 0 auto;
+    padding-top: 24px;
+
+    .ed-form-item--default {
+      margin-bottom: 16px;
+
+      &.is-error {
+        margin-bottom: 40px;
+      }
+    }
+
+    :deep(
+      .custom-require.ed-form-item.is-required:not(.is-no-asterisk).asterisk-right
+        > .ed-form-item__label:after
+    ) {
+      display: none;
+    }
+
+    :deep(.flex-inline .ed-form-item__label) {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .enter {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #ff8800;
+      margin-left: 8px;
+    }
+
+    .custom-require_danger::after {
+      color: var(--ed-color-danger);
+      content: '*';
+      margin-left: 2px;
+    }
+
+    .advance-setting {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+      cursor: pointer;
+
+      .ed-icon {
+        margin-left: 8px;
+      }
+
+      &.expand {
+        .ed-icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .model-params {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      margin: 16px 0 8px 0;
+
+      .add {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .ed-icon {
+        margin-right: 4px;
+      }
+    }
+
+    .params-table {
+      border-radius: 6px;
+      border: 1px solid #dee0e3;
+      border-top: none;
+      border-bottom: none;
+    }
+
+    .operation-column_text {
+      .ed-button {
+        color: #646a73;
+        height: 24px;
+      }
+      .ed-button:not(.is-disabled):hover {
+        background: #1f23291a;
+      }
+      .ed-button + .ed-button {
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/model/ModelList.vue b/frontend/src/views/system/model/ModelList.vue
new file mode 100644
index 00000000..710691d7
--- /dev/null
+++ b/frontend/src/views/system/model/ModelList.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import { ref, shallowRef, computed } from 'vue'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import icon_Azure_OpenAI_colorful from '@/assets/model/icon_Azure_OpenAI_colorful.png'
+interface Model {
+  name: string
+  modleType: string
+  baseModle: string
+  img?: string
+}
+const keywords = ref('')
+const modelList = shallowRef([
+  {
+    img: icon_Azure_OpenAI_colorful,
+    name: '千帆大模型-chinese',
+  },
+  {
+    img: icon_Azure_OpenAI_colorful,
+    name: '千帆大模-chinese',
+  },
+] as Model[])
+const modelListWithSearch = computed(() => {
+  if (!keywords.value) return modelList.value
+  return modelList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
+  )
+})
+const emits = defineEmits(['clickModel'])
+const handleModelClick = (item: any) => {
+  emits('clickModel', item)
+}
+</script>
+
+<template>
+  <div class="model-list">
+    <div class="title">选择供应商</div>
+    <el-input
+      clearable
+      v-model="keywords"
+      style="width: 100%; margin-right: 12px"
+      placeholder="搜索"
+    >
+      <template #prefix>
+        <el-icon>
+          <icon_searchOutline_outlined class="svg-icon" />
+        </el-icon>
+      </template>
+    </el-input>
+    <div class="list-content">
+      <div
+        @click="handleModelClick(ele)"
+        class="model"
+        v-for="ele in modelListWithSearch"
+        :key="ele.name"
+      >
+        <img width="32px" height="32px" :src="ele.img" />
+        <span class="name">{{ ele.name }}</span>
+      </div>
+      <EmptyBackground
+        v-if="!!keywords && !modelListWithSearch.length"
+        :description="'没有找到相关内容'"
+        img-type="tree"
+        style="width: 100%;margin-top: 100px;"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.model-list {
+  width: 800px;
+  margin: 0 auto;
+  height: 100%;
+  padding-top: 24px;
+  .title {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 16px;
+  }
+
+  .list-content {
+    margin-top: 16px;
+    display: flex;
+    justify-content: space-between;
+    height: calc(100% - 40px);
+
+    .model {
+      width: 392px;
+      height: 64px;
+      display: flex;
+      align-items: center;
+      padding-left: 16px;
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+      border: 1px solid #dee0e3;
+      border-radius: 4px;
+      cursor: pointer;
+      &:hover {
+        box-shadow: 0px 6px 24px 0px #1f232914;
+      }
+      .name {
+        margin-left: 12px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/model/ModelListSide.vue b/frontend/src/views/system/model/ModelListSide.vue
new file mode 100644
index 00000000..c256b690
--- /dev/null
+++ b/frontend/src/views/system/model/ModelListSide.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, shallowRef, computed } from 'vue'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import icon_Azure_OpenAI_colorful from '@/assets/model/icon_Azure_OpenAI_colorful.png'
+interface Model {
+  name: string
+  modleType: string
+  baseModle: string
+  img?: string
+}
+withDefaults(
+  defineProps<{
+    activeName: string
+  }>(),
+  {
+    activeName: '',
+  }
+)
+const keywords = ref('')
+const modelList = shallowRef([
+  {
+    img: icon_Azure_OpenAI_colorful,
+    name: '千帆大模型-chinese',
+  },
+  {
+    img: icon_Azure_OpenAI_colorful,
+    name: '千帆大模-chinese',
+  },
+] as Model[])
+const modelListWithSearch = computed(() => {
+  if (!keywords.value) return modelList.value
+  return modelList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
+  )
+})
+const emits = defineEmits(['clickModel'])
+const handleModelClick = (item: any) => {
+  emits('clickModel', item)
+}
+</script>
+
+<template>
+  <div class="model-list_side">
+    <el-input
+      clearable
+      v-model="keywords"
+      style="width: 232px; margin: 16px 0 8px 24px"
+      placeholder="搜索"
+    >
+      <template #prefix>
+        <el-icon>
+          <icon_searchOutline_outlined class="svg-icon" />
+        </el-icon>
+      </template>
+    </el-input>
+    <div class="list-content">
+      <div
+        @click="handleModelClick(ele)"
+        class="model"
+        :class="activeName === ele.name && 'isActive'"
+        v-for="ele in modelListWithSearch"
+        :key="ele.name"
+      >
+        <img width="32px" height="32px" :src="ele.img" />
+        <span class="name">{{ ele.name }}</span>
+      </div>
+      <EmptyBackground
+        v-if="!!keywords && !modelListWithSearch.length"
+        :description="'没有找到相关内容'"
+        img-type="tree"
+        style="width: 100%; margin-top: 100px"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.model-list_side {
+  width: 280px;
+  height: 100%;
+  border-right: 1px solid #1f232926;
+
+  .list-content {
+    height: calc(100% - 56px);
+    padding: 0 16px;
+
+    .model {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      .name {
+        margin-left: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+      }
+      &:hover {
+        background: #1f23291a;
+      }
+
+      &.isActive {
+        background: #1cba901a;
+        color: var(--ed-color-primary);
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/model/ParamsForm.vue b/frontend/src/views/system/model/ParamsForm.vue
new file mode 100644
index 00000000..c75f9199
--- /dev/null
+++ b/frontend/src/views/system/model/ParamsForm.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+const paramsRef = ref()
+const paramsForm = reactive({
+  name: '',
+  params: '',
+  value: null,
+  type: 0,
+})
+
+const rules = {
+  name: [{ required: true, message: '请给基础模型设置一个名称', trigger: 'blur' }],
+  params: [{ required: true, message: '请给基础模型设置一个名称', trigger: 'blur' }],
+  value: [{ required: true, message: '请给基础模型设置一个名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请给基础模型设置一个名称', trigger: 'blur' }],
+}
+
+const initForm = (item: any) => {
+  if (item) {
+    Object.assign(paramsForm, { ...item })
+  }
+  paramsRef.value.clearValidate()
+}
+
+const typeList = ['文本', '数值', 'Json']
+
+const emits = defineEmits(['submit'])
+
+const submit = () => {
+  paramsRef.value.validate((res: any) => {
+    if (res) {
+      emits('submit', paramsForm)
+    }
+  })
+}
+defineExpose({
+  initForm,
+  submit,
+})
+</script>
+
+<template>
+  <div class="params-form">
+    <el-form
+      ref="paramsRef"
+      :rules="rules"
+      label-position="top"
+      :model="paramsForm"
+      style="width: 100%"
+    >
+      <el-form-item prop="params" label="参数">
+        <el-input v-model="paramsForm.params" />
+      </el-form-item>
+      <el-form-item prop="name" label="显示名称">
+        <el-input v-model="paramsForm.name" />
+      </el-form-item>
+      <el-form-item prop="type" label="参数类型">
+        <el-radio-group v-model="paramsForm.type">
+          <el-radio v-for="(ele, index) in typeList" :key="ele" :value="index">{{ ele }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item prop="value" :label="typeList[paramsForm.type]">
+        <el-input-number
+          v-if="paramsForm.type === 1"
+          v-model="paramsForm.value"
+          controls-position="right"
+        />
+        <el-input
+          placeholder="请输入 1-50 个字符"
+          v-if="paramsForm.type === 0"
+          v-model="paramsForm.value"
+        />
+        <el-input type="textarea" v-if="paramsForm.type === 2" v-model="paramsForm.value" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.params-form {
+  .ed-form-item--default {
+    margin-bottom: 16px;
+
+    &.is-error {
+      margin-bottom: 40px;
+    }
+  }
+
+  .ed-input-number {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index bf358d84..59f79286 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,6 +1,8 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
+    "target": "es2021",
+    "lib": ["es2021", "dom"],
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "baseUrl": ".",
     "paths": {
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 4749a7e2..89a1405a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -46,6 +46,16 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    // server: {
+    //   proxy: {
+    //     '/api': {
+    //       target: 'https://sqlbot.fit2cloud.cn',
+    //       changeOrigin: true,
+    //       rewrite: path => path.replace(/^\/api/, 'api')
+    //     }
+    //   },
+    //   port: 8080
+    // },
     esbuild: {
       jsxFactory: 'h',
       jsxFragment: 'Fragment',