diff --git a/src/App.js b/src/App.js
index de4f994..c0cd014 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,7 +27,7 @@ function App() {
     [sortBy, setSortBy] = useState('Default'),
     [loader, setLoader] = useState(false),
     [lightMode, setLightMode] = useState(localStorage.getItem('light-mode') === 'true'),
-    [toggle, setToggle] = useState(true);
+    [toggle, setToggle] = useState(false);
 
   function SetLoader(x) {
     setLoader(x);
diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js
index 4687ba5..56136d4 100644
--- a/src/componets/AddItem.js
+++ b/src/componets/AddItem.js
@@ -35,18 +35,20 @@ const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => {
   return (
     <>
       <div className='add-overlay' onClick={abort}></div>
-      <fieldset className='box'>
-        <legend>New bookmark</legend>
-        <div className='AddItem-content'>
-          <h3><span style={{color:"red"}}>* </span>Link:</h3>
-          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
-          <h3>Name: <span className='optional'>(Optional)</span></h3>
-          <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
-          <h3>Tags: <span className='optional'>(Optional)</span></h3>
-          <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
-          <button onClick={newItem} className="send-btn">Add &#xf067;</button>
-        </div>
-      </fieldset>
+      <div className='send-box'>
+        <fieldset className='box'>
+          <legend>New bookmark</legend>
+          <div className='AddItem-content'>
+            <h3><span style={{color:"red"}}>* </span>Link:</h3>
+            <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
+            <h3>Name: <span className='optional'>(Optional)</span></h3>
+            <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
+            <h3>Tags: <span className='optional'>(Optional)</span></h3>
+            <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
+            <button onClick={newItem} className="send-btn">Add &#xf067;</button>
+          </div>
+        </fieldset>
+      </div>
     </>
   )
 }
diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js
index 4a1b11c..5878296 100644
--- a/src/componets/EditItem.js
+++ b/src/componets/EditItem.js
@@ -38,20 +38,22 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => {
   return (
     <>
       <div className='add-overlay' onClick={abort}></div>
-      <fieldset className='box'>
-        <legend >Edit bookmark</legend>
-        <button className="delete" onClick={deleteItem}>&#xf2ed;</button>
-        <div className='AddItem-content'>
-        <h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
-        <h3 className='title'><b>{item.title}</b></h3>
-        
-          <h3>Name: <span className='optional'>(Optional)</span></h3>
-          <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
-          <h3>Tags: <span className='optional'>(Optional)</span></h3>
-          <TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} />
-          <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
-        </div>
-      </fieldset>
+      <div className='send-box'>
+        <fieldset className='box'>
+          <legend >Edit bookmark</legend>
+          <button className="delete" onClick={deleteItem}>&#xf2ed;</button>
+          <div className='AddItem-content'>
+          <h3>Link: <a className='link' target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
+          <h3 className='title'><b>{item.title}</b></h3>
+          
+            <h3>Name: <span className='optional'>(Optional)</span></h3>
+            <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
+            <h3>Tags: <span className='optional'>(Optional)</span></h3>
+            <TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} />
+            <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
+          </div>
+        </fieldset>
+      </div>
     </>
   )
 }
diff --git a/src/componets/Filters.js b/src/componets/Filters.js
index 96c7b5d..1c496b1 100644
--- a/src/componets/Filters.js
+++ b/src/componets/Filters.js
@@ -10,12 +10,14 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
   return (
     <>  
         <div className='filter-overlay' onClick={abort}></div>
-        <fieldset className='filter'>
-            <legend >Filter by</legend>
-            <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
-            <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label>
-            <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
-        </fieldset>
+        <div className='filter-box'>
+            <fieldset className='filter'>
+                <legend >Filter by</legend>
+                <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
+                <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label>
+                <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
+            </fieldset>
+        </div>
     </>
   )
 }
diff --git a/src/componets/List.js b/src/componets/List.js
index c408671..88a933b 100644
--- a/src/componets/List.js
+++ b/src/componets/List.js
@@ -3,6 +3,7 @@ import LazyLoad from 'react-lazyload';
 import ViewArchived from './ViewArchived';
 import EditItem from './EditItem';
 import { useState } from 'react'
+import { Link } from "react-router-dom";
 
 const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
     const [editBox, setEditBox] = useState(false)
@@ -19,6 +20,14 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
 
     return (
         <div className="list">
+            {editBox ? <EditItem 
+                lightMode={lightMode} 
+                tags={() => tags} 
+                onExit={exitEditing} 
+                SetLoader={SetLoader} 
+                reFetch={reFetch} 
+                item={data[editIndex]} 
+            /> : null}
             {/* eslint-disable-next-line */}
             {data.map((e, i, array) => {
                 try {
@@ -30,12 +39,22 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
                                 <img alt='' src={favicon} />
                                 <div className="list-entity-content">
                                     <div className='row-name'>
-                                        <span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a>
+                                        <span className="num">{i + 1}.</span> 
+                                        {e.name} 
+                                        <a 
+                                            className='link' 
+                                            target="_blank" 
+                                            rel="noreferrer" 
+                                            href={e.link}
+                                        >
+                                            ({url.hostname})
+                                        </a>
                                     </div>
                                     <div className='title'>{e.title}</div>
                                     <div className="tags">
                                         {e.tag.map((e, i) => {
-                                            return (<div key={i}>{e}</div>)
+                                            const tagPath = `/tags/${e}`;
+                                            return (<Link to={tagPath} key={i}>{e}</Link>)
                                         })}
                                     </div>
                                     <div className='date'>{new Date(e.date).toDateString()}</div>
@@ -51,7 +70,6 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
                     console.log(e);
                 }
             })}
-            {editBox ? <EditItem lightMode={lightMode} tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
         </div>
     )
 }
diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
index 35a2aae..012e1ca 100644
--- a/src/componets/SideBar.js
+++ b/src/componets/SideBar.js
@@ -4,6 +4,14 @@ import '../styles/SideBar.css';
 import { Link } from "react-router-dom";
 
 const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
+    const sortedTags = tags.sort((a, b) => {
+        const A = a.toLowerCase(), B = b.toLowerCase();
+        if (A < B)
+            return -1;
+        if (A > B)
+            return 1;
+        return 0;
+    });
   return (
     <ProSidebar 
         toggled={toggle}
@@ -19,8 +27,8 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
             <MenuItem><Link to="/"><h3>Show Everything</h3></Link></MenuItem>
             
             <SubMenu icon='#' defaultOpen={true} title='Tags'>                
-                {tags.map((e, i) => {
-                    const path = `/tags/${e}`
+                {sortedTags.map((e, i) => {
+                    const path = `/tags/${e}`;
                     return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem>
                 })}
             </SubMenu>
diff --git a/src/componets/Sort.js b/src/componets/Sort.js
index 7c8be1b..f8e828e 100644
--- a/src/componets/Sort.js
+++ b/src/componets/Sort.js
@@ -14,15 +14,17 @@ const Sort = ({ sortBy, onExit }) => {
   return (
     <>
         <div className='sort-overlay' onClick={abort}></div>
-        <fieldset className='sort' onClick={sort}>
-            <legend>Sort by</legend>
-            <button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button>
-            <button className='sort-by-btn' value='Date (Oldest first)'>&#xf272; Date (Oldest first)</button>
-            <button className='sort-by-btn' value='Name (A-Z)'>&#xf15d; Name (A-Z)</button>
-            <button className='sort-by-btn' value='Name (Z-A)'>&#xf15e; Name (Z-A)</button>
-            <button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button>
-            <button className='sort-by-btn' value='Title (Z-A)'>&#xf15e; Website title (Z-A)</button>
-        </fieldset>
+        <div className='sort-box'>
+            <fieldset className='sort' onClick={sort}>
+                <legend>Sort by</legend>
+                <button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button>
+                <button className='sort-by-btn' value='Date (Oldest first)'>&#xf272; Date (Oldest first)</button>
+                <button className='sort-by-btn' value='Name (A-Z)'>&#xf15d; Name (A-Z)</button>
+                <button className='sort-by-btn' value='Name (Z-A)'>&#xf15e; Name (Z-A)</button>
+                <button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button>
+                <button className='sort-by-btn' value='Title (Z-A)'>&#xf15e; Website title (Z-A)</button>
+            </fieldset>
+        </div>
     </>
   )
 }
diff --git a/src/componets/ViewArchived.js b/src/componets/ViewArchived.js
index d995e52..c64ab80 100644
--- a/src/componets/ViewArchived.js
+++ b/src/componets/ViewArchived.js
@@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => {
 
   return (
     <div className='view-archived'>
-        <a href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
+        <a className='link' href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
         <hr className='seperator' />
-        <a href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
+        <a className='link' href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
     </div>
   )
 }
diff --git a/src/styles/Filters.css b/src/styles/Filters.css
index 916ea17..290b3f8 100644
--- a/src/styles/Filters.css
+++ b/src/styles/Filters.css
@@ -23,6 +23,11 @@
     left: 0;
     bottom: 0;
     width: 100vw;
+    z-index: 1;
+}
+
+.filter-box {
+    position: relative;
 }
 
 .filter {
@@ -35,11 +40,11 @@
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     padding: 5px;
-    top: 15%;
     position: absolute;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    z-index: 2;
 }
 
 .filter legend {
diff --git a/src/styles/List.css b/src/styles/List.css
index edba6ea..f95cd38 100644
--- a/src/styles/List.css
+++ b/src/styles/List.css
@@ -60,7 +60,7 @@
     align-items: center;
   }
 
-  .list a {
+  .link {
     text-decoration: underline;
   }
 
@@ -106,20 +106,20 @@
   flex-direction: column;
 }
 
-.list a {
+.link {
   white-space: nowrap;
   font-family: 'Font Awesome 5 Free';
   pointer-events: all;
   font-size: 1rem;
 }
 
-.list a::after {
+.link::after {
   content: " ";
   opacity: 0%;
   transition: opacity 0.1s;
 }
 
-.list a:hover::after {
+.link:hover::after {
   opacity: 100%;
 }
 
@@ -153,12 +153,12 @@
   flex-wrap: wrap;
 }
 
-.tags div {
+.tags a {
   margin-right: 10px;
+  color: #2b8add;
 }
 
-.tags div::before {
-
+.tags a::before {
   color: rgb(42, 125, 172);
   content: "# ";
 }
diff --git a/src/styles/SendItem.css b/src/styles/SendItem.css
index 158029c..ac13811 100644
--- a/src/styles/SendItem.css
+++ b/src/styles/SendItem.css
@@ -14,7 +14,6 @@
     }
 }
 
-
 .add-overlay {
     animation: fadein 0.2s;
     background-color: black;
@@ -26,6 +25,10 @@
     width: 100vw;
 }
 
+.send-box {
+    position: relative;
+}
+
 .box {
     animation: fadein 0.3s;
     border: solid;
@@ -34,7 +37,6 @@
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     position: absolute;
     z-index: 2;
-    top: 15%;
     background-color: #1f2c38;
     overflow-x: hidden;
     overflow-y: auto;
diff --git a/src/styles/Sort.css b/src/styles/Sort.css
index 70bb939..a4a57d6 100644
--- a/src/styles/Sort.css
+++ b/src/styles/Sort.css
@@ -1,7 +1,7 @@
 @media (min-width: 800px) {
     .sort {
-        left: 35%;
-        right: 35%;
+        left: 30%;
+        right: 30%;
         min-width: 200px;
     }
 }
@@ -23,6 +23,11 @@
     left: 0;
     bottom: 0;
     width: 100vw;
+    z-index: 1;
+}
+
+.sort-box {
+    position: relative;
 }
 
 .sort {
@@ -35,11 +40,11 @@
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     padding: 5px;
-    top: 15%;
     position: absolute;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    z-index: 2;
 }
 
 .sort legend {
diff --git a/src/styles/index.css b/src/styles/index.css
index 5f4bd02..e6d1519 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -58,7 +58,7 @@ body {
   color: darkgray;
 }
 
-.list a {
+.link {
   color: rgb(194, 193, 193);
 }
 
@@ -130,7 +130,7 @@ body {
   color: rgb(105, 105, 105);
 }
 
-.light .list a {
+.light .link {
   color: rgb(102, 102, 102);
 }