diff --git a/.gitignore b/.gitignore
index 665e73083062144a749cb5d9a7cecaae8b3af981..a607c2d5946df679ab122b9bddecebe455c7fd00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,7 @@
 
 # build files
 src/Element-UI/build
+build
+.idea
+.cache
+.vscode
diff --git a/CMakeLists.txt b/CMakeLists.txt
new file mode 100644
index 0000000000000000000000000000000000000000..e64babc689bdba5eb8e3ca3d3eeccb578c9482b9
--- /dev/null
+++ b/CMakeLists.txt
@@ -0,0 +1,26 @@
+cmake_minimum_required(VERSION 3.15)
+project(Element-UI VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_AUTOUIC ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(QT NAMES Qt6 Qt5 COMPONENTS Core Gui Widgets Svg Xml REQUIRED)
+find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Core Gui  Widgets Svg Xml REQUIRED)
+
+aux_source_directory(src/Element-UI srcs)
+
+file(GLOB_RECURSE QRC_SOURCE_FILES ${CMAKE_CURRENT_SOURCE_DIR}/res.qrc)
+
+qt5_add_resources(QRC_FILES ${QRC_SOURCE_FILES})
+
+add_executable(Element-UI ${srcs} ${QRC_FILES})
+
+target_link_libraries(Element-UI Qt${QT_VERSION_MAJOR}::Core
+                     Qt${QT_VERSION_MAJOR}::Gui
+                     Qt${QT_VERSION_MAJOR}::Widgets
+                     Qt${QT_VERSION_MAJOR}::Svg
+                     Qt${QT_VERSION_MAJOR}::Xml
+                    )
\ No newline at end of file
diff --git a/src/Element-UI/elalert.cpp b/src/Element-UI/elalert.cpp
index dc60dbe95ecf535318ba7be7f2f506b10cdbee41..cff4686d27dc134c8e14941d05894ab5fbe53e58 100644
--- a/src/Element-UI/elalert.cpp
+++ b/src/Element-UI/elalert.cpp
@@ -247,7 +247,8 @@ void ElAlert::paintEvent(QPaintEvent *e)
     // draw rect
     painter.setPen(_palette.color(ElPalette::Border));
     painter.setBrush(_palette.color(ElPalette::Background));
-    painter.drawRoundedRect(rect().toRectF(), height() / 8.0, height() / 8.0);
+    QRectF _rectf(this->rect());
+    painter.drawRoundedRect(_rectf, height() / 8.0, height() / 8.0);
     // draw title
     painter.setPen(_palette.color(ElPalette::Foreground));
     auto left = Padding_Lr + (_center ? extra_space / 2.0 : 0)
diff --git a/src/Element-UI/elbutton.cpp b/src/Element-UI/elbutton.cpp
index 50e91e28aa5de22891cc01a8404a5cfa187b9572..c501d2dc661b2a4684f37db480cee3bd44a57e09 100644
--- a/src/Element-UI/elbutton.cpp
+++ b/src/Element-UI/elbutton.cpp
@@ -4,6 +4,7 @@
 #include <QMouseEvent>
 #include <QPaintEvent>
 #include <QPainter>
+#include <QDebug>
 #include "elicon.h"
 
 const int ElButton::Icon_Size = 16;
@@ -77,7 +78,8 @@ void ElButton::paintEvent(QPaintEvent *e)
     painter.setPen(pen);
     painter.setBrush(_palette.color(ElPalette::Background));
     qreal r = (_type != Rounded) ? height() / 6.0 : height() / 2.0;
-    painter.drawRoundedRect(rect().toRectF(), r, r);
+    QRectF _rectf(this->rect());
+    painter.drawRoundedRect(_rectf, r, r);
     painter.setPen(_palette.color(ElPalette::Foreground));
     // draw text
     auto left = _iconStyle == Append ? Padding_Lr : width() - Padding_Lr - br.width();
@@ -93,7 +95,7 @@ void ElButton::paintEvent(QPaintEvent *e)
     e->accept();
 }
 
-void ElButton::enterEvent(QEnterEvent *e)
+void ElButton::enterEvent(QEvent *e)
 {
     if (!isEnabled()) {
         e->accept();
@@ -257,7 +259,8 @@ void ElCircleButton::paintEvent(QPaintEvent *e)
         pen.setWidthF(1.2);
     painter.setPen(pen);
     painter.setBrush(_palette.color(ElPalette::Background));
-    painter.drawEllipse(rect().center().toPointF(), _radius, _radius);
+    QRectF _rectf(this->rect());
+    painter.drawEllipse(_rectf.center(), _radius, _radius);
     if (_icon != nullptr) {
         auto r = _icon->rect();
         r.moveCenter(rect().center());
diff --git a/src/Element-UI/elbutton.h b/src/Element-UI/elbutton.h
index e0c47929622b2b73197db49bab903b5912a51e2f..6a863bcae3cee8670425a1cf6373d7f2a39e9d17 100644
--- a/src/Element-UI/elbutton.h
+++ b/src/Element-UI/elbutton.h
@@ -5,6 +5,8 @@
 #include "elabstractbutton.h"
 #include "eltheme.h"
 
+class QEnterEvent;
+
 class ElButton : public ElAbstractButton
 {
     Q_OBJECT
@@ -31,7 +33,7 @@ protected:
 
     bool event(QEvent *e) override;
     void paintEvent(QPaintEvent *e) override;
-    void enterEvent(QEnterEvent *e) override;
+    void enterEvent(QEvent *e) override;
     void leaveEvent(QEvent *e) override;
     void mousePressEvent(QMouseEvent *e) override;
     void mouseReleaseEvent(QMouseEvent *e) override;
diff --git a/src/Element-UI/elcheckbox.cpp b/src/Element-UI/elcheckbox.cpp
index 4bfc6701036593990db1643663b23bf55336d14d..a087c00e5e57ace10a3ec4e9802b3eb2b87f4451 100644
--- a/src/Element-UI/elcheckbox.cpp
+++ b/src/Element-UI/elcheckbox.cpp
@@ -93,7 +93,7 @@ void ElCheckbox::paintEvent(QPaintEvent *e)
     e->accept();
 }
 
-void ElCheckbox::enterEvent(QEnterEvent *e)
+void ElCheckbox::enterEvent(QEvent *e)
 {
     if (!isEnabled()) {
         e->accept();
diff --git a/src/Element-UI/elcheckbox.h b/src/Element-UI/elcheckbox.h
index 2dfc8b184b17503bb5a8a8920506d204800a5c22..52fbc9fbbd6ac939f6f5bd6df19df8a6b0e4c457 100644
--- a/src/Element-UI/elcheckbox.h
+++ b/src/Element-UI/elcheckbox.h
@@ -3,6 +3,8 @@
 
 #include "elabstractbutton.h"
 
+class QEnterEvent;
+
 class ElCheckbox : public ElAbstractButton
 {
     Q_OBJECT
@@ -30,7 +32,7 @@ protected:
 
     bool event(QEvent *e) override;
     void paintEvent(QPaintEvent *e) override;
-    void enterEvent(QEnterEvent *e) override;
+    void enterEvent(QEvent *e) override;
     void leaveEvent(QEvent *e) override;
     void mousePressEvent(QMouseEvent *e) override;
     void mouseReleaseEvent(QMouseEvent *e) override;
diff --git a/src/Element-UI/elinput.cpp b/src/Element-UI/elinput.cpp
index 175c81883e4dbf0f0efabe454105229e53ded34d..dcf9bbae0af0e34c1a8376da48bb84527ca15ccf 100644
--- a/src/Element-UI/elinput.cpp
+++ b/src/Element-UI/elinput.cpp
@@ -45,11 +45,12 @@ void ElInput::paintEvent(QPaintEvent *e)
     QPainter painter(this);
     painter.setPen(_palette.color(ElPalette::Border));
     painter.setBrush(Qt::white);
-    painter.drawRoundedRect(rect().toRectF(), height() / 8.0, height() / 8.0);
+    QRectF _rectf(this->rect());
+    painter.drawRoundedRect(_rectf, height() / 8.0, height() / 8.0);
     e->accept();
 }
 
-void ElInput::enterEvent(QEnterEvent *e)
+void ElInput::enterEvent(QEvent *e)
 {
     if (!isEnabled() || _palette.currentColorGroup() == ElPalette::Pressed) {
         e->accept();
diff --git a/src/Element-UI/elinput.h b/src/Element-UI/elinput.h
index 9dd97b8cf6518a5f0f8334f817ee9b029922bfc0..5a521fa627b0839c13d361c72370543897491c1d 100644
--- a/src/Element-UI/elinput.h
+++ b/src/Element-UI/elinput.h
@@ -4,6 +4,8 @@
 #include <QLineEdit>
 #include "elcomponent.h"
 
+class QEnterEvent;
+
 class ElInput : public ElComponent
 {
     Q_OBJECT
@@ -19,7 +21,7 @@ public:
 protected:
     bool eventFilter(QObject *watched, QEvent *e) override;
     void paintEvent(QPaintEvent *e) override;
-    void enterEvent(QEnterEvent *e) override;
+    void enterEvent(QEvent *e) override;
     void leaveEvent(QEvent *e) override;
     void initPalette() override;
 
diff --git a/src/Element-UI/elmessage.cpp b/src/Element-UI/elmessage.cpp
index 260aecf13e0e530232e2de95a1416bbd69ef8917..a514aaf1edb321374d870fc03037ef4cffb24dce 100644
--- a/src/Element-UI/elmessage.cpp
+++ b/src/Element-UI/elmessage.cpp
@@ -277,7 +277,8 @@ void ElMessage::paintEvent(QPaintEvent *e)
     pen.setWidthF(1.5);
     painter.setPen(pen);
     painter.setBrush(_palette.color(ElPalette::Background));
-    painter.drawRoundedRect(rect().toRectF(), height() / 5.0, height() / 5.0);
+    QRectF _rectf(this->rect());
+    painter.drawRoundedRect(_rectf, height() / 5.0, height() / 5.0);
     // show icon
     _icon->resize(QSize(Icon_Size, Icon_Size));
     QRect drawing_rect;
@@ -328,7 +329,7 @@ void ElMessage::manager_handle_msgs_animation()
 {
     fadeOut();
     // then remove it because it should be deleted
-    msg_manager.remove(_no); // remember that _no is the next one after remove
+    msg_manager.removeAt(_no); // remember that _no is the next one after remove
     // the msgs after the index should slide up
     for (qsizetype i = _no; i < msg_manager.size(); ++i) {
         auto &msg = msg_manager[i];
diff --git a/src/Element-UI/elnotification.cpp b/src/Element-UI/elnotification.cpp
index 0422f7521597b305a8fa90dc7ddce9b2911e3b64..34e339be3cb2bd0cb837740bd54684cb45e88688 100644
--- a/src/Element-UI/elnotification.cpp
+++ b/src/Element-UI/elnotification.cpp
@@ -273,7 +273,7 @@ void ElNotification::setPosition(Position position)
     if (_position == position)
         return;
     // remove from original notify_managers
-    notify_managers[_position].remove(_no);
+    notify_managers[_position].removeAt(_no);
     _position = position;
     // append into current notify_managers
     notify_managers[_position] << this;
@@ -368,7 +368,7 @@ void ElNotification::fadeOut()
 void ElNotification::manager_handle_notify_animation()
 {
     fadeOut();
-    notify_managers[_position].remove(_no); // remove this from notify_managers[_position]
+    notify_managers[_position].removeAt(_no); // remove this from notify_managers[_position]
     for (qsizetype i = _no; i < notify_managers[_position].size(); ++i) {
         /* be careful that notify->_no isn't equal to i or this->_no.
          * Their relationship is `notify->_no - 1 == this->_no`.
@@ -417,7 +417,8 @@ void ElNotification::paintEvent(QPaintEvent *e)
     // draw rect
     painter.setBrush(Qt::white);
     painter.setPen(_palette.color(ElPalette::Border));
-    painter.drawRoundedRect(rect().toRectF(), height() / 8.0, height() / 8.0);
+    QRectF _rectf(this->rect());
+    painter.drawRoundedRect(_rectf, height() / 8.0, height() / 8.0);
     // draw message and title
     painter.setPen(ThemeColor::textPrimaryColor);
     bool hasIcon = (type() != Default) || (_icon != nullptr);
@@ -452,7 +453,7 @@ void ElNotification::showEvent(QShowEvent *e)
     e->accept();
 }
 
-void ElNotification::enterEvent(QEnterEvent *e)
+void ElNotification::enterEvent(QEvent *e)
 {
     _fadeTimer->stop();
     e->accept();
diff --git a/src/Element-UI/elnotification.h b/src/Element-UI/elnotification.h
index 120b20a6ce5c65b675c290662de345feead47870..2c534f9393130594f73cb5a55a224316a616a732 100644
--- a/src/Element-UI/elnotification.h
+++ b/src/Element-UI/elnotification.h
@@ -7,6 +7,7 @@
 class ElIcon;
 class QPropertyAnimation;
 class ElTextButton;
+class QEnterEvent;
 /**
  * @brief The ElNotification class
  * Same as ElMessage, don't delete any instance of ElNotification explicitly
@@ -107,7 +108,7 @@ signals:
 protected:
     void paintEvent(QPaintEvent *e) override;
     void showEvent(QShowEvent *e) override;
-    void enterEvent(QEnterEvent *e) override;
+    void enterEvent(QEvent *e) override;
     void leaveEvent(QEvent *e) override;
     void mouseReleaseEvent(QMouseEvent *e) override;
     void initPalette() override;
diff --git a/src/Element-UI/elradio.cpp b/src/Element-UI/elradio.cpp
index 243a5316d45fed52de2067e267b8df0f9d3ee1f2..ae5f654962ce4ea7072615290a44ddf6c0c718e7 100644
--- a/src/Element-UI/elradio.cpp
+++ b/src/Element-UI/elradio.cpp
@@ -76,7 +76,7 @@ void ElRadio::paintEvent(QPaintEvent *e)
     e->accept();
 }
 
-void ElRadio::enterEvent(QEnterEvent *e)
+void ElRadio::enterEvent(QEvent *e)
 {
     if (!isEnabled()) {
         e->accept();
diff --git a/src/Element-UI/elradio.h b/src/Element-UI/elradio.h
index 6ba3d9ed96efb3599c2d515f87d697a260b7b55a..521d1453f6415573e00c74933eee32bb7d12279c 100644
--- a/src/Element-UI/elradio.h
+++ b/src/Element-UI/elradio.h
@@ -3,6 +3,8 @@
 
 #include "elabstractbutton.h"
 
+class QEnterEvent;
+
 class ElRadio : public ElAbstractButton
 {
     Q_OBJECT
@@ -22,7 +24,7 @@ signals:
 protected:
     bool event(QEvent *e) override;
     void paintEvent(QPaintEvent *e) override;
-    void enterEvent(QEnterEvent *e) override;
+    void enterEvent(QEvent *e) override;
     void leaveEvent(QEvent *e) override;
     void mousePressEvent(QMouseEvent *e) override;
     void mouseReleaseEvent(QMouseEvent *e) override;
diff --git a/src/Element-UI/elslider.cpp b/src/Element-UI/elslider.cpp
index 2fd7bf19c64af776765647684523d8ec9237e88c..bf31245605bdc5bfde29099276c5d7cf90797701 100644
--- a/src/Element-UI/elslider.cpp
+++ b/src/Element-UI/elslider.cpp
@@ -104,7 +104,7 @@ void ElSlider::mousePressEvent(QMouseEvent *e)
         e->ignore();
         return;
     }
-    setValue(e->position().x() * _max / width());
+    setValue(e->pos().x() * _max / width());
     emit sliderPressed();
     e->accept();
 }
@@ -162,11 +162,12 @@ void ElSlider::ElSliderCircle::paintEvent(QPaintEvent *e)
     pen.setWidthF(1.5);
     pen.setColor(_palette.color(ElPalette::Border));
     painter.setPen(pen);
-    painter.drawEllipse(rect().center().toPointF(), _radius, _radius);
+    QRectF _rectf(this->rect());
+    painter.drawEllipse(_rectf.center(), _radius, _radius);
     e->accept();
 }
 
-void ElSlider::ElSliderCircle::enterEvent(QEnterEvent *e)
+void ElSlider::ElSliderCircle::enterEvent(QEvent *e)
 {
     if (!isEnabled()) {
         e->ignore();
@@ -222,7 +223,7 @@ void ElSlider::ElSliderCircle::mouseMoveEvent(QMouseEvent *e)
         e->ignore();
         return;
     }
-    auto pos = mapToParent(e->position()); // position related to its parent, ElSlider
+    auto pos = mapToParent(e->pos()); // position related to its parent, ElSlider
     if (pos.x() < Init_Radius || pos.x() > _slider->width() - 2 * Init_Radius) {
         e->ignore();
         return;
diff --git a/src/Element-UI/elslider.h b/src/Element-UI/elslider.h
index 7deb4d2a7bc25d42c47b3df3ef1d3f630acc832d..2345611c9f147b37cd98c4718f083f08ccf7a59a 100644
--- a/src/Element-UI/elslider.h
+++ b/src/Element-UI/elslider.h
@@ -4,6 +4,7 @@
 #include "elcomponent.h"
 
 class QPropertyAnimation;
+class QEnterEvent;
 
 // BUG: Slider's tooltip and value(property) need to be fixed
 // TODO: need to rewrite
@@ -59,7 +60,7 @@ protected:
     protected:
         bool event(QEvent *e) override;
         void paintEvent(QPaintEvent *e) override;
-        void enterEvent(QEnterEvent *e) override;
+        void enterEvent(QEvent *e) override;
         void leaveEvent(QEvent *e) override;
         void mousePressEvent(QMouseEvent *e) override;
         void mouseReleaseEvent(QMouseEvent *e) override;
diff --git a/src/Element-UI/elswitch.cpp b/src/Element-UI/elswitch.cpp
index ffd6a9d83ef70df3b284786bd3c2753eed362b9c..d3295ad1b5c34dcea93dcabb9621cfb554a4d573 100644
--- a/src/Element-UI/elswitch.cpp
+++ b/src/Element-UI/elswitch.cpp
@@ -258,7 +258,8 @@ void ElSwitch::ElSwitchCircle::paintEvent(QPaintEvent *e)
     painter.setPen(Qt::white);
     painter.setBrush(Qt::white);
     // if parent is active, circle should be on right side.
-    painter.drawEllipse(rect().toRectF().center(), Radius, Radius);
+    QRectF _rectf(this->rect());
+    painter.drawEllipse(_rectf.center(), Radius, Radius);
     e->accept();
 }
 
diff --git a/src/Element-UI/elswitch.h b/src/Element-UI/elswitch.h
index b683b57986a3ca5a7703db8d889a0ef4f55c8f4e..57b93186f4035c761932dbdbc401320c8a786e22 100644
--- a/src/Element-UI/elswitch.h
+++ b/src/Element-UI/elswitch.h
@@ -2,6 +2,7 @@
 #define ELSWITCH_H
 
 #include "elcomponent.h"
+#include <QVariant>
 
 class QPropertyAnimation;
 // BUG: fix circle's position when change the text on left(inactive state) side
diff --git a/src/Element-UI/eltheme.h b/src/Element-UI/eltheme.h
index 3749df817a8db7aef5270463a1036a89a6eebf62..686a97e1e77fe5579901a742eb16143796cc51c2 100644
--- a/src/Element-UI/eltheme.h
+++ b/src/Element-UI/eltheme.h
@@ -2,6 +2,7 @@
 #define ELTHEME_H
 
 #include <QColor>
+#include <QVariant>
 
 namespace ThemeColor {
 extern QColor textColor;         // regular
diff --git a/src/Element-UI/eltooltip.cpp b/src/Element-UI/eltooltip.cpp
index 3b9348b45454d637b32d976247c62e8ae31259a8..582fd860de7437f2db7d34bc00e5806de2cc1b0a 100644
--- a/src/Element-UI/eltooltip.cpp
+++ b/src/Element-UI/eltooltip.cpp
@@ -3,6 +3,7 @@
 #include <QPainter>
 #include <QPropertyAnimation>
 #include <QTimer>
+#include <QDebug>
 #include "eltheme.h"
 
 const qreal ElTooltip::Padding_Lr = 10;
@@ -263,7 +264,7 @@ void ElTooltip::showEvent(QShowEvent *e)
     e->accept();
 }
 
-void ElTooltip::enterEvent(QEnterEvent *e)
+void ElTooltip::enterEvent(QEvent *e)
 {
     isEntered = true;
     e->accept();
diff --git a/src/Element-UI/eltooltip.h b/src/Element-UI/eltooltip.h
index e9a5cd8ffbd2a84a0063502cc33d807f25837fda..45bb03b83a32ea3cf9f5c99a981d2b17e18777b1 100644
--- a/src/Element-UI/eltooltip.h
+++ b/src/Element-UI/eltooltip.h
@@ -4,6 +4,7 @@
 #include "elcomponent.h"
 
 class QPropertyAnimation;
+class QEnterEvent;
 
 class ElTooltip : public ElComponent
 {
@@ -85,7 +86,7 @@ protected:
     bool event(QEvent *e) override;
     void paintEvent(QPaintEvent *e) override;
     void showEvent(QShowEvent *e) override;
-    void enterEvent(QEnterEvent *e) override;
+    void enterEvent(QEvent *e) override;
     void leaveEvent(QEvent *e) override;
     void initPalette() override;
 
diff --git a/src/Element-UI/mainwindow.cpp b/src/Element-UI/mainwindow.cpp
index dd580db3df291d4401d834144a180c13cb52eab8..67bef108cc400596eff09912e882eeb0b72f40a7 100644
--- a/src/Element-UI/mainwindow.cpp
+++ b/src/Element-UI/mainwindow.cpp
@@ -1,6 +1,7 @@
 #include "mainwindow.h"
 #include <QResizeEvent>
 #include <QTimer>
+#include <QDebug>
 #include "elalert.h"
 #include "elbutton.h"
 #include "elcheckbox.h"
diff --git a/src/Element-UI/svghelper.cpp b/src/Element-UI/svghelper.cpp
index 962d7157a241270f6460569d01d68e4d5a3ce2dd..d217dbd7ceb9bce3e5ad24eaf11e7e215ba60d54 100644
--- a/src/Element-UI/svghelper.cpp
+++ b/src/Element-UI/svghelper.cpp
@@ -1,6 +1,7 @@
 #include "svghelper.h"
 #include <QBuffer>
 #include <QFileInfo>
+#include <QDebug>
 
 SvgHelper::SvgHelper(const QString &filename)
 {
diff --git a/src/Element-UI/svghelper.h b/src/Element-UI/svghelper.h
index a2389f4e49bf0abc9872bfa985fb9d5192bab2c1..e0e3eb89778512b4907af37bb8d0855ef192135e 100644
--- a/src/Element-UI/svghelper.h
+++ b/src/Element-UI/svghelper.h
@@ -3,6 +3,7 @@
 
 #include <QColor>
 #include <QDomDocument>
+#include <QTextStream>
 
 class SvgHelper
 {