diff --git a/www/html/_assets/themes/default/borders.css b/www/html/_assets/themes/default/borders.css
new file mode 100644
index 0000000..6f9a192
--- /dev/null
+++ b/www/html/_assets/themes/default/borders.css
@@ -0,0 +1,38 @@
+.border {
+    border:1px solid #CAD5E0 ;    
+}
+.border-round {
+    padding:6px;
+    border-radius:8px;
+}
+.border-round-top-left{
+    border-top-left-radius: 8px;    
+    padding:6px;
+}
+.border-round-top-right{
+    border-top-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-right{
+    border-bottom-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-left{
+    border-bottom-left-radius: 8px;
+    padding:6px;
+}
+
+
+.border-right{
+    border-right:1px solid #CAD5E0;
+    
+}
+
+.border-left{
+    border-left:1px solid #CAD5E0;
+}
+
+
+.border-bottom { border-bottom:1px solid #CAD5E0}
+.border-top { border-top:1px solid #CAD5E0}
+
diff --git a/www/html/_assets/themes/default/footer.css b/www/html/_assets/themes/default/footer.css
new file mode 100644
index 0000000..8086c04
--- /dev/null
+++ b/www/html/_assets/themes/default/footer.css
@@ -0,0 +1,19 @@
+/**
+* This file styles the footer of the page
+*/
+
+.footer {
+    text-align:center;
+    display:grid;
+    grid-template-columns: repeat(3,1fr);
+    gap:4px;
+    padding:8px;
+    font-size:12px;
+    color:black;
+    align-items: center;
+    align-content: center;
+    text-transform: capitalize;
+    /* background-color: rgba(255,255,255,0.8); */
+    
+    grid-column: 1 /span 2;
+}
diff --git a/www/html/_assets/themes/default/header.css b/www/html/_assets/themes/default/header.css
new file mode 100644
index 0000000..a64ce8b
--- /dev/null
+++ b/www/html/_assets/themes/default/header.css
@@ -0,0 +1,3 @@
+.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
+.main .header .title {font-size:28px; font-weight:bold}
+.main .header img {width:55px; height:55px;}
diff --git a/www/html/_assets/themes/default/layout.css b/www/html/_assets/themes/default/layout.css
new file mode 100644
index 0000000..2b5b09a
--- /dev/null
+++ b/www/html/_assets/themes/default/layout.css
@@ -0,0 +1,92 @@
+.main {
+    height: 98vh;
+    display: grid;
+    grid-template-columns: 70% auto;
+    grid-template-rows: 70px 40px auto 32px;
+    gap: 4px;
+    padding-left: 2%;
+    padding-right: 2%;
+    line-height: 1.5;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: lighter;
+}
+
+/* Ensure text scales properly */
+.main .content {
+    align-self: center;
+}
+
+.main .pane {
+    border-left: 1px solid #CAD5E0;
+    height: 100%;
+    padding: 8px;
+}
+
+/* Typography */
+.bold {
+    font-weight: bold;
+}
+
+.small-text {
+    font-size: 12px;
+    font-weight: lighter;
+    color: #000000;
+}
+
+.large-text {
+    font-weight: bold;
+    font-size: 28px;
+}
+
+/* Active state styling */
+.active {
+    cursor: pointer;
+    padding: 2px;
+    margin: 2px;
+    border-bottom: 2px solid transparent;
+}
+
+.active:hover {
+    border-bottom-color: #4682b4;
+}
+
+/* Responsive Design */
+
+/* Tablets & Small Screens */
+@media (max-width: 1024px) {
+    .main {
+        grid-template-columns: 60% 40%;
+        grid-template-rows: 60px 40px auto 32px;
+        font-size: 14px;
+    }
+
+    .large-text {
+        font-size: 24px;
+    }
+}
+
+/* Mobile Screens */
+@media (max-width: 768px) {
+    .main {
+        grid-template-columns: 1fr; /* Single column layout */
+        grid-template-rows: auto;
+        height: auto;
+        gap: 8px;
+        padding: 4%;
+    }
+
+    .main .pane {
+        border-left: none;
+        border-top: 1px solid #CAD5E0;
+        padding: 12px;
+    }
+
+    .large-text {
+        font-size: 20px;
+    }
+
+    .small-text {
+        font-size: 10px;
+    }
+}
diff --git a/www/html/_assets/themes/default/menu.css b/www/html/_assets/themes/default/menu.css
new file mode 100644
index 0000000..7a14d15
--- /dev/null
+++ b/www/html/_assets/themes/default/menu.css
@@ -0,0 +1,78 @@
+.menu {
+    padding:8px;
+    border:1px solid #CAD5E0 ;
+    
+    display:grid;
+    grid-column: 1 / span 2;
+    grid-template-columns: 92px repeat(7,auto);
+    gap:4px;
+    text-transform: capitalize;
+    align-items: center;
+    
+}
+.menu .icon {padding:4px;}
+.menu .icon img {width:30px; height:30px;}
+.menu .item {
+    font-weight:bold;
+    cursor:pointer;
+    padding:4px;
+    text-align: left;
+   
+    
+   
+    
+    
+}
+
+.menu .sub-menu {
+    
+    display:none;
+    position:absolute;
+    
+    margin-top:2px;
+    min-width:10%;
+    z-index:90;
+    padding:8px;
+    font-weight:lighter;
+    text-align:left;
+    align-items:left; 
+    background-color: rgba(255,255,255,0.8);
+    
+}
+
+.menu .item:hover .sub-menu{
+    
+    display:block;
+    height:auto;    
+}
+/**
+* TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
+*/
+.tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;}
+.tab-content table tr:nth-child(even) {background-color: #f3f3f3;}
+/* .tab-content {width:80%;} */
+
+.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; 
+    /* background-color: #f3f3f3; */
+    padding-top:4px;
+    padding-left:4px;
+    padding-right:4px;
+}
+.tabs input[type=radio] {display:none; }
+.tabs input[type=radio] + label { font-weight:lighter;  
+    border:1px solid transparent;
+    border-bottom-color: #CAD5E0;
+    background-color: #f3f3f3;
+    padding:8px;
+    padding-right:10px; padding-left:10px;
+    
+    cursor:pointer
+}
+.tabs input[type=radio]:checked +label {
+    background-color: #ffffff;
+    border-top-right-radius: 8px; 
+    border-top-left-radius: 8px;
+    font-weight:bold;
+    border-color: #CAD5E0;
+    border-bottom-color: #FFFFFF;
+}