started with ui. made a new app.R for that and made the home page and started with the explore page. Header with baselayout is also done.

www/styles.css

@@ -0,0 +1,104 @@
+:root {
+  color-scheme: light;
+  --text-dark: #000000;
+  --text-light: #ffffff;
+
+  --grey-900: #1f2937;
+  --grey-800: #2b3441;
+  --grey-200: #b1b9c5;
+  --grey-100: #e7f1ff;
+  --grey-white: #ffffff;
+
+  --blue-light: #7faeff;
+  --blue: #5757fd;
+  --blue-dark: #4545ba;
+
+}
+
+body {
+  background: var(--grey-white);
+  color: var(--text-dark);
+}
+
+/*------------------------header-------------------------------------------*/
+.navbar {
+  background-color: var(--grey-100); 
+  border-bottom: 1px solid var(--blue-light) !important;
+  align-items: center;
+  width: 100;
+}
+
+/* The app title */
+.navbar-brand {
+  color: var(--text-dark);
+  font-size: 1.4rem;
+}
+
+/* Nav container */
+.navbar-nav {
+  display: flex;
+  justify-content: space-evenly;
+  align-self: center;
+}
+
+/*Header buttons*/
+.navbar-nav .nav-link {
+  padding: 0.2rem 1.2rem !important; 
+  margin: 0.4rem 0rem;
+  border: none;
+  border-radius: 5px; 
+} 
+
+/*----------------------------------------------------------------------------*/
+
+.navbar-nav .nav-link.active,
+.tab-button:hover, 
+.navbar-nav .nav-link.focus,
+.tab-button:focus, 
+#tab_menu  .nav-link.active {
+  background-color: var(--blue-light);
+  color: var(--text-light)
+}
+
+/* Center the tab buttons */
+#tab_menu {
+  justify-content: center;
+}
+
+/* Style individual tab buttons */
+#tab_menu  .nav-link {
+  background-color: var(--grey-100);
+  border-radius: 4px;
+  margin: 0rem 1rem;
+  color: var(--text-dark)
+}
+
+
+
+/*----------------------------------------------------------------------------*/
+
+.sidebar {
+  background-color: var(--grey-100) !important;
+  border-right: 1px solid var(--blue-light) !important; 
+}
+
+.sidebar_collector{
+  border: 1px solid var(--blue-light);
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.sidebar_collector_header{
+  border-bottom: 1px dashed var(--blue-light);
+  padding: 0 0 15px 0; 
+}
+/*----------------------------------------------------------------------------*/
+.home-text-section{
+  background-color: var(--grey-white);
+  padding: 10px;
+  border-radius: 4px; 
+  max-width: 900px;
+  align-self: start;
+}
+
+