diff --git a/bundles/com.espressif.idf.ui/go.css b/bundles/com.espressif.idf.ui/go.css
index d0ea02b2b..4f5c76420 100644
--- a/bundles/com.espressif.idf.ui/go.css
+++ b/bundles/com.espressif.idf.ui/go.css
@@ -1,68 +1,93 @@
- .page-style {
- text-align: center;
- margin-top: 100px;
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: #fff;
+ margin: 0;
+ padding: 0;
+}
+
+.content {
+ text-align: center;
+ padding: 50px 20px;
+ margin-right: 220px; /* Leave space for the sidebar */
+}
+
+#icon {
+ width: 200px; /* Increase the logo size */
+}
+
+h2 {
+ font-size: 24px;
+ margin: 20px 0;
+}
+
+p {
+ font-size: 16px;
+ line-height: 1.5;
+ max-width: 600px;
+ margin: 0 auto 30px; /* Center align and add space below */
+}
+
+.esp-idf-button {
+ display: inline-block;
+ padding: 10px 20px;
+ font-size: 16px;
+ border: 2px solid #000;
+ background-color: #fff;
+ color: #000; /* Text color */
+ cursor: pointer;
+ border-radius: 5px;
+ text-align: center;
+ margin-top: 20px;
+ text-decoration: none; /* Remove underline */
+}
+
+.esp-idf-button:hover {
+ background-color: #f0f0f0; /* Slight hover effect */
+}
+
+.sidebar {
+ position: fixed;
+ right: 0;
+ top: 100px; /* Adjust based on how much space you want at the top */
+ width: 200px;
+ padding: 20px;
+ background-color: #fff;
+ border-left: 1px solid #ccc;
+}
+
+.sidebar h2 {
+ font-size: 18px;
+ margin-bottom: 10px;
+}
+
+.sidebar ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0 0 20px 0;
+}
+
+.sidebar ul li {
+ margin-bottom: 10px;
+}
+
+.sidebar ul li a {
+ text-decoration: none;
+ color: #007bff;
+ font-size: 14px;
+}
+
+.sidebar ul li a:hover {
+ text-decoration: underline;
+}
+
+#footer {
+ text-align: center;
+ font-size: 12px;
+ color: gray;
+ margin-top: 40px;
+ padding: 20px 0;
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ background-color: #fff;
}
- body > div.page-style {
- padding-left: 30%;
- padding-right: 30%;
-}
- #title {
- margin-top: 3%;
- width: 50%;
-}
- #icon {
- width: 50%;
-}
- #copyright {
- color: gray;
- font-size: medium;
- text-align: right;
-}
- .content {
- margin-left: 2%;
- margin-right: 2%;
- padding-right: 10%;
- padding-left: 10%;
- font-size: large;
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
- .content-help {
- margin-left: 2%;
- margin-right: 2%;
- padding-top: 2%;
- padding-right: 10%;
- padding-left: 10%;
-}
- .body {
- background: #fff;
-}
- .icon {
- margin: 5%;
-}
- .icon-help {
- margin: 1%;
-}
- .link {
- display: block;
- height: 100%;
-}
- .button {
- background: #fff;
- transition: all 200ms;
-}
- .button:hover {
- background: gainsboro;
-}
- .header {
- padding: 2%;
- padding-left: 5%;
- padding-right: 5%;
-}
- .help-header {
- padding-left: 5%;
- padding-right: 5%;
-}
- .fill {
- width: auto;
-}
-
\ No newline at end of file
diff --git a/bundles/com.espressif.idf.ui/index.html b/bundles/com.espressif.idf.ui/index.html
index dd7939a53..ce1799a4e 100644
--- a/bundles/com.espressif.idf.ui/index.html
+++ b/bundles/com.espressif.idf.ui/index.html
@@ -1,31 +1,36 @@
-
-
-
-
Welcome to Espressif-IDE
-
- Espressif-IDE brings developers an easy-to-use Eclipse based development environment for developing ESP32 based IoT applications. It provides better tooling capabilities, which simplifies and enhances standard Eclipse CDT for developing and debugging ESP32 IoT applications. It offers advanced editing, compiling, flashing and debugging features with the addition of Installing the tools, SDK configuration and CMake editors.
-
- It supports ESP-IDF CMake based projects (4.x and above) with ESP32, ESP32-S, ESP32-C, ESP32-H and ESP32-P Series SoCs.
-
-
What's New?
-
-
Documentation
-
-
-
- © Espressif Systems 2024
-
-
-
-
\ No newline at end of file
+
+
+
+
Welcome to Espressif-IDE
+
+ Espressif-IDE brings developers an easy-to-use Eclipse-based development environment for developing ESP32-based IoT applications. It provides better tooling capabilities, which simplifies and enhances standard Eclipse CDT for developing and debugging ESP32 IoT applications.
+
+
+
+ To get started, please click on the ESP-IDF Manager below to configure ESP-IDF and its tools.
+
+
ESP-IDF Manager
+
+
+
+
+