diff --git a/api/modules/getData.js b/api/modules/getData.js
index 87e970f1..e58a20b4 100644
--- a/api/modules/getData.js
+++ b/api/modules/getData.js
@@ -4,8 +4,8 @@ const fetch = require('cross-fetch');
 const config = require('../../src/config.js');
 const fs = require('fs');
 
-const screenshotDirectory = config.API.STORAGE_LOCATION + '/Webmarker/screenshot\'s/';
-const pdfDirectory = config.API.STORAGE_LOCATION + '/Webmarker/pdf\'s/';
+const screenshotDirectory = config.API.STORAGE_LOCATION + '/LinkWarden/screenshot\'s/';
+const pdfDirectory = config.API.STORAGE_LOCATION + '/LinkWarden/pdf\'s/';
 
 if (!fs.existsSync(screenshotDirectory)){
   fs.mkdirSync(screenshotDirectory, { recursive: true });
diff --git a/api/package-lock.json b/api/package-lock.json
index 87981ac0..b119dd14 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -4623,7 +4623,8 @@
     "ws": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.6.0.tgz",
-      "integrity": "sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw=="
+      "integrity": "sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw==",
+      "requires": {}
     },
     "xdg-basedir": {
       "version": "4.0.0",
diff --git a/api/server.js b/api/server.js
index 13f8f1cf..912d44e8 100644
--- a/api/server.js
+++ b/api/server.js
@@ -3,7 +3,8 @@ const app = express();
 const { MongoClient } = require('mongodb');
 const cors = require('cors');
 const config = require('../src/config.js');
-const getData = require('./modules/getData.js')
+const getData = require('./modules/getData.js');
+const fs = require('fs');
 
 const port = config.API.PORT;
 
@@ -22,6 +23,14 @@ app.get('/api', async (req, res) => {
   res.send(data);
 });
 
+app.get('/screenshots/:id', async (req, res) => {
+  res.sendFile(config.API.STORAGE_LOCATION + '/LinkWarden/screenshot\'s/' + req.params.id);
+});
+
+app.get('/pdfs/:id', async (req, res) => {
+  res.sendFile(config.API.STORAGE_LOCATION + '/LinkWarden/pdf\'s/' + req.params.id);
+});
+
 app.post('/api', async (req, res) => {
   const pageToVisit = req.body.link;
 
@@ -77,6 +86,19 @@ async function deleteDoc(doc) {
     const list = db.collection(collection);
     const result = await list.deleteOne({"_id": doc});
 
+    fs.unlink(config.API.STORAGE_LOCATION + '/LinkWarden/screenshot\'s/' + doc + '.png', (err) => {
+      if (err) {
+        console.log(err);
+      }
+    });
+
+    fs.unlink(config.API.STORAGE_LOCATION + '/LinkWarden/pdf\'s/' + doc + '.pdf', (err) => {
+      if (err) {
+          console.log(err);
+      }
+    });
+
+
     return result;
   } 
   
diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js
index a4d5455f..66cff537 100644
--- a/src/componets/AddItem.js
+++ b/src/componets/AddItem.js
@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import { nanoid } from 'nanoid'
 import '../styles/AddItem.css';
-import config from '../config';
 import TagSelection from './TagSelection';
+import addItem from '../modules/addItem';
 
 const AddItem = ({onExit, reFetch, tags}) => {
   const [name, setName] = useState('');
@@ -22,54 +21,6 @@ const AddItem = ({onExit, reFetch, tags}) => {
     setTag(value.map(e => e.value.toLowerCase()));
   }
 
-  async function submitBookmark() {
-    function isValidHttpUrl(string) {
-      let url;
-      
-      try {
-        url = new URL(string);
-      } catch (_) {
-        return false;  
-      }
-    
-      return url.protocol === "http:" || url.protocol === "https:";
-    }
-
-    if(name !== '' && isValidHttpUrl(link) && tag !== '') {
-      const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
-      fetch(ADDRESS + "/api", {
-        
-        // Adding method type
-        method: "POST",
-        
-        // Adding body or contents to send
-        body: JSON.stringify({
-            _id: nanoid(),
-            name: name,
-            title: '',
-            link: link,
-            tag: tag
-        }),
-        
-        // Adding headers to the request
-        headers: {
-            "Content-type": "application/json; charset=UTF-8"
-        }
-      })
-      .then(res => res.text())
-      .then(message => {console.log(message)})
-      .then(() => reFetch());
-  
-      onExit();
-    } else if(name !== '' && link !== '' && tag !== '') {
-      alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
-    }
-
-    else {
-      alert('Please fill all fields and make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
-    }
-  }
-
   function abort(e) {
     if (e.target.className === "add-overlay") {
       onExit();
@@ -88,11 +39,11 @@ const AddItem = ({onExit, reFetch, tags}) => {
           <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tags:</h3>
           <TagSelection setTags={SetTags} tags={tags} />
-          <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
+          <button onClick={() => addItem(name, link, tag, reFetch, onExit)} className="upload-btn">Upload &#xf093;</button>
         </div>
       </fieldset>
     </>
   )
 }
 
-export default AddItem
+export default AddItem;
diff --git a/src/componets/List.js b/src/componets/List.js
index 85c2205f..54787e1f 100644
--- a/src/componets/List.js
+++ b/src/componets/List.js
@@ -1,28 +1,9 @@
 import '../styles/List.css';
-import config from '../config';
 import LazyLoad from 'react-lazyload';
+import ViewArchived from './ViewArchived';
+import deleteEntity from '../modules/deleteEntity';
 
 const List = ({data, reFetch}) => {
-  function deleteEntity(id) {
-    const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
-    fetch(ADDRESS + "/api", {
-    
-        // Adding method type
-        method: "DELETE",
-        
-        // Adding body or contents to send
-        body: JSON.stringify({id}),
-        
-        // Adding headers to the request
-        headers: {
-            "Content-type": "application/json; charset=UTF-8",
-        }
-    })
-    .then(res => res.text())
-    .then(message => {console.log(message)})
-    .then(() => reFetch())
-  }
-
   return (
     <div className="list">
         {data.map((e, i) => {
@@ -34,7 +15,9 @@ const List = ({data, reFetch}) => {
                         <div className="img-content-grp">
                             <img src={favicon} />
                             <div className="list-entity-content">
-                                <div className='row-name'><span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a></div>
+                                <div className='row-name'>
+                                    <span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a>
+                                </div>
                                 <div>{e.title}</div>
                                 <div className="tags">
                                     {e.tag.map((e, i) => {
@@ -43,7 +26,10 @@ const List = ({data, reFetch}) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>
+                        <div className='options'>
+                            <ViewArchived className='view-archived' id={e._id} />
+                            <div className="delete" onClick={() => deleteEntity(e._id, reFetch)}>&#xf2ed;</div>
+                        </div>
                     </div>
                 </LazyLoad>
             } catch (e) {
diff --git a/src/componets/ViewArchived.js b/src/componets/ViewArchived.js
new file mode 100644
index 00000000..4c991240
--- /dev/null
+++ b/src/componets/ViewArchived.js
@@ -0,0 +1,17 @@
+import '../styles/ViewArchived.css';
+import config from '../config';
+
+const ViewArchived = ({ id }) => {
+    const screenshotPath = config.API.ADDRESS + ":" + config.API.PORT + '/screenshots/' + id + '.png';
+    const pdfPath = config.API.ADDRESS + ":" + config.API.PORT + '/pdfs/' + id + '.pdf';
+
+  return (
+    <div className='view-archived'>
+        <a href={screenshotPath} target='_blank'>Screenshot</a>
+        <hr className='seperator' />
+        <a href={pdfPath} target='_blank'>PDF</a>
+    </div>
+  )
+}
+
+export default ViewArchived;
\ No newline at end of file
diff --git a/src/modules/addItem.js b/src/modules/addItem.js
new file mode 100644
index 00000000..ae795324
--- /dev/null
+++ b/src/modules/addItem.js
@@ -0,0 +1,46 @@
+import config from '../config';
+import { nanoid } from 'nanoid';
+
+const addItem = async (name, link, tag, reFetch, onExit) => {
+    function isValidHttpUrl(string) {
+      let url;
+      
+      try {
+        url = new URL(string);
+      } catch (_) {
+        return false;  
+      }
+    
+      return url.protocol === "http:" || url.protocol === "https:";
+    }
+
+    if(name !== '' && isValidHttpUrl(link) && tag !== '') {
+      const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
+      fetch(ADDRESS + "/api", {
+        method: "POST",
+        body: JSON.stringify({
+            _id: nanoid(),
+            name: name,
+            title: '',
+            link: link,
+            tag: tag
+        }),
+        headers: {
+            "Content-type": "application/json; charset=UTF-8"
+        }
+      })
+      .then(res => res.text())
+      .then(message => {console.log(message)})
+      .then(() => reFetch());
+  
+      onExit();
+    } else if(name !== '' && link !== '' && tag !== '') {
+      alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
+    }
+
+    else {
+      alert('Please fill all fields and make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
+    }
+  }
+
+export default addItem;
\ No newline at end of file
diff --git a/src/modules/deleteEntity.js b/src/modules/deleteEntity.js
new file mode 100644
index 00000000..473f5615
--- /dev/null
+++ b/src/modules/deleteEntity.js
@@ -0,0 +1,17 @@
+import config from '../config';
+
+const deleteEntity = (id, reFetch) => {
+    const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
+    fetch(ADDRESS + "/api", {
+        method: "DELETE",
+        body: JSON.stringify({id}),
+        headers: {
+            "Content-type": "application/json; charset=UTF-8",
+        }
+    })
+    .then(res => res.text())
+    .then(message => {console.log(message)})
+    .then(() => reFetch())
+  }
+
+  export default deleteEntity;
\ No newline at end of file
diff --git a/src/styles/List.css b/src/styles/List.css
index c91965a1..286bf0d1 100644
--- a/src/styles/List.css
+++ b/src/styles/List.css
@@ -109,4 +109,9 @@
 
 .num {
   font-size: 1rem;
-}
\ No newline at end of file
+}
+
+.options {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/styles/ViewArchived.css b/src/styles/ViewArchived.css
new file mode 100644
index 00000000..45eebce2
--- /dev/null
+++ b/src/styles/ViewArchived.css
@@ -0,0 +1,10 @@
+.view-archived {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.seperator {
+    width: 100%;
+    color: white;
+}
\ No newline at end of file