diff --git a/networking/osi_model/osi_model.html b/networking/osi_model/osi_model.html
index 61df3c0..477cd4a 100644
--- a/networking/osi_model/osi_model.html
+++ b/networking/osi_model/osi_model.html
@@ -51,49 +51,56 @@
         </div>
     
         <link rel="stylesheet" href="osi_model.css" type="text/css">
+        <script type="text/javascript" src="osi_model.js"></script>
     </head>
     
     <body>
         <h1>OSI Model</h1>
                 <div class="osiDrop">
-                    <div class="sevenDropBtn" onclick="7Drop()">Layer 7<div class="arrow">v</div></div>
-                    <div class="7Drop-content" id="7Drop">
+                    <div class="oddBtn"><div><a class="sevenBtn" id="sevenDropBtn" onclick="sevenDrop()">Layer 7</a></div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div></div>
+                    <div class="osiODrop-content" id="sevenDrop">
+                        <p>asdasd</p>
+                    </div>
+                </div><br>
+                <div class="osiDrop">
+                    <div class="evenBtn" id="sixDropBtn" onclick="6Drop()">Layer 6</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiEDrop-content" id="6Drop">
                         <p></p>
                     </div>
                 </div><br>
                 <div class="osiDrop">
-                    <div class="sixDropBtn" onclick="6Drop()">Layer 6<div class="arrow">v</div></div>
-                    <div class="6Drop-content" id="6Drop">
+                    <div class="oddBtn" id="fiveDropBtn" onclick="5Drop()">Layer 5</div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiODrop-content" id="5Drop">
                         <p></p>
                     </div>
                 </div><br>
                 <div class="osiDrop">
-                    <div class="fiveDropBtn" onclick="5Drop()">Layer 5<div class="arrow">v</div></div>
-                    <div class="5Drop-content" id="5Drop">
+                    <div class="evenBtn" id="fourDropBtn" onclick="4Drop()">Layer 4</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiEDrop-content" id="4Drop">
                         <p></p>
                     </div>
                 </div><br>
                 <div class="osiDrop">
-                    <div class="fourDropBtn" onclick="4Drop()">Layer 4<div class="arrow">v</div></div>
-                    <div class="4Drop-content" id="4Drop">
+                    <div class="oddBtn" id="threeDropBtn" onclick="3Drop()">Layer 3</div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiODrop-content" id="3Drop">
                         <p></p>
                     </div>
                 </div><br>
                 <div class="osiDrop">
-                    <div class="threeDropBtn" onclick="3Drop()">Layer 3<div class="arrow">v</div></div>
-                    <div class="3Drop-content" id="3Drop">
+                    <div class="evenBtn" id="twoDropBtn" onclick="2Drop()">Layer 2</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiEDrop-content" id="2Drop">
                         <p></p>
                     </div>
                 </div><br>
                 <div class="osiDrop">
-                    <div class="twoDropBtn" onclick="2Drop()">Layer 2<div class="arrow">v</div></div>
-                    <div class="2Drop-content" id="2Drop">
+                    <div class="oddBtn" id="oneDropBtn" onclick="1Drop()">Layer 1</div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiODrop-content" id="1Drop">
                         <p></p>
                     </div>
                 </div><br>
                 <div class="osiDrop">
-                    <div class="oneDropBtn" onclick="1Drop()">Layer 1<div class="arrow">v</div></div>
-                    <div class="1Drop-content" id="1Drop">
+                    <div class="evenBtn" id="refDropBtn" onclick="refDrop()">References</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
+                    <div class="osiEDrop-content" id="refDrop">
                         <p></p>
                     </div>
                 </div><br>
diff --git a/networking/osi_model/osi_model_assets/arrow.png b/networking/osi_model/osi_model_assets/arrow.png
new file mode 100644
index 0000000..c911b95
Binary files /dev/null and b/networking/osi_model/osi_model_assets/arrow.png differ
diff --git a/networking/osi_model/osi_model_assets/osi_model.css b/networking/osi_model/osi_model_assets/osi_model.css
index 894e38c..d77081f 100644
--- a/networking/osi_model/osi_model_assets/osi_model.css
+++ b/networking/osi_model/osi_model_assets/osi_model.css
@@ -1,154 +1,53 @@
 .osiDrop {
-    text-align: left;
+    text-align: center;
     overflow: hidden;
 }
 
-.arrow {
-    text-align: right;
+ .arrowOdd {
+    background-color: blue;
+    text-align: inherit;
 }
 
-.osiDrop .sevenDropBtn {
-    cursor: pointer;
-    font-size: 16px;
-    border: none;
-    outline: none;
-    color: #f2f2f2;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-}
-
-.osiDrop .sixDropBtn {
-    cursor: pointer;
-    font-size: 16px;
-    border: none;
-    outline: none;
-    color: #f2f2f2;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-}
-
-.osiDrop .fiveDropBtn {
-    cursor: pointer;
-    font-size: 16px;
-    border: none;
-    outline: none;
-    color: #f2f2f2;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-}
-
-.osiDrop .fourDropBtn {
+.arrowEven {
     background-color: black;
+    text-align: inherit;
+}
+
+.osiDrop .oddBtn {
     cursor: pointer;
     font-size: 16px;
     border: none;
     outline: none;
     color: #f2f2f2;
-    padding: 14px 16px;
+    background-color: blue;
     font-family: inherit;
     margin: 0;
 }
 
-.osiDrop .threeDropBtn {
+.osiDrop .evenBtn {
     cursor: pointer;
     font-size: 16px;
     border: none;
     outline: none;
     color: #f2f2f2;
-    padding: 14px 16px;
-    background-color: inherit;
+    background-color: black;
     font-family: inherit;
     margin: 0;
 }
 
-.osiDrop .twoDropBtn {
-    cursor: pointer;
-    font-size: 16px;
-    border: none;
-    outline: none;
-    color: #f2f2f2;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-}
-
-.osiDrop .oneDropBtn {
-    cursor: pointer;
-    font-size: 16px;
-    border: none;
-    outline: none;
-    color: #f2f2f2;
-    padding: 14px 16px;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-}
-
-.7Drop-content {
+.osiODrop-content {
     display: none;
     position: absolute;
-    background-color: #373737;
+    background-color: blue;
     color: #ddd;
     min-width: 160px;
     z-index: 1;
 }
 
-.6Drop-content {
+.osiEDrop-content {
     display: none;
     position: absolute;
-    background-color: #373737;
-    color: #ddd;
-    min-width: 160px;
-    z-index: 1;
-}
-
-.5Drop-content {
-    display: none;
-    position: absolute;
-    background-color: #373737;
-    color: #ddd;
-    min-width: 160px;
-    z-index: 1;
-}
-
-.4Drop-content {
-    display: none;
-    position: absolute;
-    background-color: #373737;
-    color: #ddd;
-    min-width: 160px;
-    z-index: 1;
-}
-
-.3Drop-content {
-    display: none;
-    position: absolute;
-    background-color: #373737;
-    color: #ddd;
-    min-width: 160px;
-    z-index: 1;
-}
-
-.2Drop-content {
-    display: none;
-    position: absolute;
-    background-color: #373737;
-    color: #ddd;
-    min-width: 160px;
-    z-index: 1;
-}
-
-.1Drop-content {
-    display: none;
-    position: absolute;
-    background-color: #373737;
+    background-color: blue;
     color: #ddd;
     min-width: 160px;
     z-index: 1;
diff --git a/networking/osi_model/osi_model_assets/osi_model.js b/networking/osi_model/osi_model_assets/osi_model.js
index e69de29..fbe064f 100644
--- a/networking/osi_model/osi_model_assets/osi_model.js
+++ b/networking/osi_model/osi_model_assets/osi_model.js
@@ -0,0 +1,21 @@
+function sevenDrop() {
+    document.getElementById("sevenDrop").classList.toggle("osiOshow");
+}
+
+function webDrop() {
+    document.getElementById("webDrop").classList.toggle("show");
+}
+
+window.onclick = function(e) {
+    if (!e.target.matches('.sevenBtn')) {
+        var myDropdown = document.getElementById("sevenDrop");
+        if (myDropdown.classList.contains('osiOshow')) {
+            myDropdown.classList.remove ('osiOshow');
+        }
+    }else if (!e.target.matches('.webDropBtn')) {
+        var myDropdown = document.getElementById("webDrop");
+        if (myDropdown.classList.contains('show')) {
+            myDropdown.classList.remove('show');
+        }
+    }
+}
\ No newline at end of file
diff --git a/sitewide_assets/index.html b/sitewide_assets/index.html
new file mode 100644
index 0000000..e69de29
