diff --git a/static/css/menu.css b/static/css/menu.css
new file mode 100644
index 0000000..123e05e
--- /dev/null
+++ b/static/css/menu.css
@@ -0,0 +1,45 @@
+.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 .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;    
+}
\ No newline at end of file
diff --git a/static/css/search.css b/static/css/search.css
new file mode 100644
index 0000000..e473425
--- /dev/null
+++ b/static/css/search.css
@@ -0,0 +1,74 @@
+
+/**
+* components: search
+*/
+.search .frame .suggestion-frame {
+    width:98%;
+    overflow: hidden;
+    overflow-y: auto;
+    word-wrap: normal;
+    margin-top:2px;
+    border-right:1px solid #CAD5E0;
+}
+.search .frame .suggestion-frame .suggestions {
+    display:none;
+    position:absolute;
+    width:55%;
+    height:55%;
+    z-index:9;
+    overflow:hidden;
+    overflow-y: auto;
+    padding:4px;;
+    
+    
+   
+    
+}
+.search .frame .input-frame{
+    display:grid;
+    grid-template-columns: auto 32px 48px ;
+    gap:4px;
+    align-items: center;
+    align-content:center;
+    padding:4px;
+    background-color: rgba(255,255,255,0.8);
+}
+.search .frame .input-frame i {color:#000000}
+.search .frame .input-frame .found { font-size:11px; color:maroon; text-align: center;}
+.search .frame input[type="text"] {
+    
+    padding:8px;
+    font-size:14px;
+    font-weight:normal;
+    border:2px solid transparent;
+    outline: 0px;
+    background-color:#D3D3D3;
+    
+}
+
+.search .frame .suggestions .item {
+    display:grid;
+    grid-template-columns: 60px auto ; 
+    height:60px;  
+    gap:4px;
+    padding:8px;
+    align-items:center;
+}
+
+.search .frame .suggestions .item .title { width:85%; overflow:hidden; font-size:14px; font-weight: normal; text-transform:capitalize; text-overflow: ellipsis;  white-space: nowrap;}
+.search .frame .suggestions .item .author {width:80%; overflow:hidden; font-size:14px; font-weight: lighter;text-transform: capitalize;text-overflow: ellipsis;  white-space: nowrap;}
+.search .frame .suggestions .item .picture{
+    height:50px;
+    display:grid;
+    grid-template-columns: auto;
+    padding:4px;
+}
+.search .frame .suggestions .item .link {
+    display:grid;
+    grid-template-columns: auto  120px;
+    
+    font-size:12px;
+    align-items:center;
+    align-content: center;
+    overflow:hidden;
+}
diff --git a/static/css/themes/oss.css b/static/css/themes/oss.css
new file mode 100644
index 0000000..6be1c32
--- /dev/null
+++ b/static/css/themes/oss.css
@@ -0,0 +1,58 @@
+.main {
+    gap:4px;
+    font-size: 18px;
+    font-weight:lighter;
+    font-family:sans-serif;
+    margin:1%;
+    margin-left:10%;
+    margin-right:10%;
+    gap:4px;
+}
+.main .header { height:64px;
+   display:grid;
+   grid-template-columns: 40px auto;
+    border-bottom: 2px double #CAD5E0;
+    padding:4px;
+    gap:4px;
+    align-items: center;
+
+    
+}
+.main .header .title { font-size:32px; text-transform: uppercase; font-weight:bold}
+.main .header .subtitle {font-style:italic;font-size:14px; color:gray; text-transform: capitalize;}
+
+.main .header img {height:48px; margin:4px;}
+.main .menu {border:0; background-color: #f3f3f3;}
+.main .content img{
+    width:99%;
+    border:1px solid #CAD5E0;
+    padding:8px;
+    background-color:#f3f3f3;
+}
+
+/* .main .content table thead tr:first-child {
+    padding:4px;
+    background: #d3d3d3;
+ } */
+ blockquote {
+    border-left:8px solid #D3D3D3; padding:4px;
+    }
+    .main .content table {border-spacing: 2;}    
+.main .content table .fa-check {color:green; font-size:20px;}
+.main .content table .fa-times {color:RED; font-size:20px;}
+.main .content table .active {font-size:14px}
+.main .content .banner {
+    height:300px; margin:4px;
+    padding:0px; 
+    
+}
+.code { margin-top:8px;
+    background:black; color:#d3d3d3;padding:10px; text-wrap: nowrap;
+    font-family: 'Courier New', Courier, monospace; font-weight:lighter; font-size:13px;}
+ .main .pane { height:auto;}
+ .main .pane iframe{ width:100%; border:0px; height:80%;}
+
+ .dialog-title {
+    background-color:darkgray;color:#FFFFFF;
+    text-transform:capitalize; font-weight:bold; align-items:center;display:grid; grid-template-columns:auto 32px;
+}
\ No newline at end of file