diff --git a/docs/css/master.css b/docs/css/master.css
new file mode 100644
index 0000000..b059fd6
--- /dev/null
+++ b/docs/css/master.css
@@ -0,0 +1,239 @@
+*
+{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body
+{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-container
+{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    background-color: #f1f1f1;
+}
+
+.orphic-navbar
+{
+    width: 100%;
+    height: 120px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5%;
+}
+
+.orphic-navbar > .orphic-navbar-rsection
+{
+    position: absolute;
+    z-index: 9;
+}
+
+.orphic-navbar > .orphic-navbar-section
+{
+    width: 100%;
+    height: 60px;;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: #f1f1f1;;
+    border-radius: 0 60px 60px 0;
+    margin-left: 12px;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    list-style: none;
+    padding-left: 120px;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li
+{
+    margin-right: 12px;
+    margin-left: 12px;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item
+{
+    width: fit-content;
+    height: 35px;
+    border-radius: 35px;
+    padding: 0 25px;;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.custom-cute
+{
+    display: none;
+    font-weight: 600;
+    font-size: 17px;
+    width: 100px;
+    overflow: hidden;
+}
+
+@media only screen and (max-width: 820px)
+{
+    .orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.custom-cute
+    {
+        display: block;
+    }
+    .orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item
+    {
+        display: none;
+    }
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.custom-cute > button
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.6;
+    border: none;
+    font-size: 17px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item:hover
+{
+    opacity: 0.7;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item.active
+{
+    /* background: rgba(0, 0, 0, 0.1); */
+    box-shadow: inset 0 0 0 2px rgba(0, 183, 255, 0.1);
+    color: rgba(0, 183, 255, 1);
+    font-weight: 600;
+}
+
+.orphic-navbar > .orphic-navbar-section > ul > li.orphic-nav-item > a
+{
+    color: inherit;
+    text-decoration: none;
+}
+
+
+.orphic-navbar > .orphic-navbar-section > ul > li:last-child
+{
+    /* margin-right: 6%; */
+}
+
+/* logo */
+
+.o-logo-wrapper
+{
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+    animation: oRot 0.9s 1 alternate ease;
+}
+@keyframes oRot {
+    0%
+    {
+        transform: rotate(0) rotateY(0) scale(1);
+    }
+    100%
+    {
+        transform: rotate(360deg) scale(0.9);
+    }
+}
+@keyframes oScale {
+    0%
+    {
+        transform: scale(1);
+    }
+    100%
+    {
+        transform: scale(1.5);
+    }
+}
+.bd-rd
+{
+    border-radius: 200px;
+}
+.pd-20
+{
+    padding: 10px;
+}
+@keyframes oRot2 {
+    0%
+    {
+        transform: rotate(0);
+    }
+    100%
+    {
+        transform: rotate(360deg);
+    }
+}
+.o-logo-subwrapper
+{
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 0 2px rgba(0, 183, 255, 0.1);
+    border-radius: 200px;
+    animation: oRot 200s infinite alternate ease;
+}
+.o-logo-subbwrapper
+{
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0 0 0 6px rgba(0, 255, 136, 0.05);
+    border-radius: 200px;
+}
+.custom-co1
+{
+    transform: scale(0.9);
+    background-color: rgba(0, 183, 255, 0.1);
+    overflow: hidden;
+    background-image: url(../images/orph.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    animation: oScale 1s 2 alternate ease;
+}
+
+.custom-aligner
+{
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 0;
+    background-color: #f1f1f1;
+}
+
+.logo-text
+{
+    font-size: 100px;
+    font-weight: 600;
+    /* font-family: 'Century Gothic'; */
+    font-family: 'From the stars';
+    margin-left: 20px;
+    color: #f1f1f1;
+}
\ No newline at end of file
diff --git a/docs/css/o.css b/docs/css/o.css
deleted file mode 100644
index b353fe0..0000000
--- a/docs/css/o.css
+++ /dev/null
@@ -1,11 +0,0 @@
-*
-{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-body
-{
-    
-}
\ No newline at end of file
diff --git a/docs/images/orph.png b/docs/images/orph.png
new file mode 100644
index 0000000..aaab22c
Binary files /dev/null and b/docs/images/orph.png differ
diff --git a/docs/index.html b/docs/index.html
index 2c246c1..6595395 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,17 +6,71 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>orphic</title>
     <link rel="stylesheet" href="./../dist/css/o.css">
-    <script src="./../dist/js/o.min.js"></script>
+    <script src="../dist/js/o.min.js"></script>
+    <link rel="stylesheet" href="./css/master.css">
 </head>
 <body>
     
-    <div class="o-navbar">
-        <div class="inner-o-navbar">
+    <div class="app-container">
 
+        <div class="orphic-navbar">
+            <div class="orphic-navbar-rsection orphic-logo">
+                
+                <div class="o-orphic o-logo-wrapper bd-rd" data-osh="o-drop, left: 12, right: 12, top: 12, bottom: 12">
 
+                    <div class="o-orphic-back bd-rd" data-oblur="none"></div>
+            
+                    <div class="o-orphic-layer pd-20">
+            
+                        <div class="o-orphic o-logo-subwrapper">
+            
+                            <div class="o-orphic o-logo-subbwrapper">
+            
+                                <!-- <div class="o-orphic-back bd-rd" data-oblur="none"></div> -->
+            
+                                <div class="o-orphic-layer custom-co1 bd-rd">
+            
+                                </div>
+            
+                            </div>
+            
+                        </div>
+            
+                    </div>
+            
+                </div>
 
+            </div>
+            <div class="o-orphic orphic-navbar-section" data-osh="o-box, left: 6, right: 6, top: 6, bottom: 6, blur: 12">
+                <ul class="o-orphic-layer">
+                    <li class="orphic-nav-item active">
+                        <a href="#">Preview</a>
+                    </li>
+                    <li class="orphic-nav-item">
+                        <a href="#">Explore Docs</a>
+                    </li>
+                    <li class="orphic-nav-item">
+                        <a href="#">Examples</a>
+                    </li>
+                    <li class="orphic-nav-item">
+                        <a href="#">Github</a>
+                    </li>
+                    <li class="o-orphic orphic-nav-item custom-cute" data-osh="o-drop">
+                        <button class="o-orphic-layer">
+                            <span>menu</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
         </div>
+
     </div>
 
+    <script>
+        let orphic = new OrphicUI();
+        orphic.init(document);
+        orphic.render(document);
+    </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/o.html b/tests/o.html
index 49678f1..fe7c754 100644
--- a/tests/o.html
+++ b/tests/o.html
@@ -158,4 +158,4 @@ <h1 class="logo-text o-orphic" data-osh="o-text, left: 4, right: 4, top: 4, bott
         orphic.render(document);
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>