diff --git a/assets/buttons/menu.svg b/assets/buttons/dashboard.svg
similarity index 100%
rename from assets/buttons/menu.svg
rename to assets/buttons/dashboard.svg
diff --git a/css/dock-buttons.css b/css/dock-buttons.css
new file mode 100644
index 0000000..326900e
--- /dev/null
+++ b/css/dock-buttons.css
@@ -0,0 +1,54 @@
+/*Web buttons*/
+
+.buttonContainer {
+	width: 36px;
+	height: 36px;
+	position: relative;
+	background: var(--base-container);
+	border-radius: var(--rounded-radius);
+	margin: 2px;
+	padding: 5px;
+	border: none;
+	cursor: pointer;
+	transition: transform .2s;
+}
+
+.buttonContainer div {
+	background-size: cover;
+	width: 36px;
+	height: 36px;
+	border: none;
+
+	position:absolute;
+	left:0; right:0;
+	top:0; bottom:0;
+	margin:auto;
+	
+	max-width:100%;
+	max-height:100%;
+	overflow:auto;
+}
+
+.buttonContainer:hover {
+	background: var(--base-hover-bg);
+
+	-ms-transform: scale(1.25);
+	-webkit-transform: scale(1.25);
+	transform: scale(1.25); 
+}
+
+.buttonContainer:active {
+	background: var(--base-active-bg);
+
+	-ms-transform: scale(1);
+	-webkit-transform: scale(1);
+	transform: scale(1); 
+}
+
+#buttonImage0 {
+	background-image: url("../assets/buttons/launch.svg");
+}
+
+#buttonImage9 {
+	background-image: url("../assets/buttons/menu.svg");
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index aa69dac..dec135a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,6 +4,7 @@
 @import url('top-panel.css');
 @import url('clock.css');
 @import url('dock.css');
+@import url('dock-buttons.css');
 
 :root {
 	/* Colors */
diff --git a/index.html b/index.html
index ef8dd78..8534abb 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,6 @@
 
 	<div class='dockContainer'>
 		<div class='bar' id='dock'>
-			<h4>gag</h4>
 			<!-- Javascript will generate a list here -->
 		</div>
 	</div>
@@ -50,5 +49,7 @@
 
 	<script src="js/body-background-set.js"></script>
 	<script src="js/clock.js"></script>
+	<script src="js/sites-list.js"></script>
+	<script src="js/dock-buttons.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/dock-buttons.js b/js/dock-buttons.js
new file mode 100644
index 0000000..8bcb35d
--- /dev/null
+++ b/js/dock-buttons.js
@@ -0,0 +1,91 @@
+var dock = document.getElementById('dock');
+
+// Create mouse event for passed div
+const addMouseUpEvent = (li, url) => {
+    li.onmouseup = () => {
+        window.location.href = encodeURI(url);
+    }
+}
+
+// Generate button from user
+const generateFromManual = (id, icon, callback) => {
+
+    var customButtonCallback;
+
+    var buttonContainer = document.createElement('div');
+    buttonContainer.id = 'button' + id;
+    buttonContainer.className = 'buttonContainer';
+    
+    buttonContainer.onmouseup = callback;
+    
+    var buttonImage = document.createElement('div');
+    buttonImage.id = 'buttonImage' + id;
+    buttonImage.className = 'bottomButton';
+    buttonImage.style.background = "url('assets/buttons/" + icon + ".svg')";
+    buttonImage.style.backgroundSize = 'cover';
+
+    buttonContainer.appendChild(buttonImage);
+    dock.appendChild(buttonContainer);
+}
+
+// Create callback event for onmouse up
+const addCallbackEvent = (element, callback) => {
+    element.onmouseup = callback;
+}
+
+// Generate buttons from array
+const generateFromList = () => {
+
+    // Create launcher button
+    generateFromManual(
+        'Launch',
+        'launch', 
+        () => {
+            // Toggle site pad
+        }
+    );
+
+    for (i = 0; i < (dockSites.length); i++) {
+
+        var site = dockSites[i].site;
+        var icon = dockSites[i].icon;
+        var url = dockSites[i].url;
+
+        var buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button' + i;
+        buttonContainer.className = 'buttonContainer';
+        addMouseUpEvent(buttonContainer, url);
+
+        var buttonImage = document.createElement('div');
+        buttonImage.id = 'buttonImage' + i;
+        buttonImage.className = 'bottomButton';
+        buttonImage.style.background = "url('assets/webcons/" + icon + ".svg')";
+        buttonImage.style.backgroundSize = 'cover';
+
+        // Append divs
+        buttonContainer.appendChild(buttonImage);
+        dock.appendChild(buttonContainer);
+    };
+
+    // Create weather button
+    generateFromManual(
+        'Weather',
+        'weather', 
+        () => {
+            weatherToggle();
+        }
+    );
+
+    // Create menu button
+    generateFromManual(
+        'Dashboard',
+        'dashboard', 
+        () => {
+
+            // Toggle dashboard
+        }
+    );
+}
+
+window.onload =  generateFromList();
+
diff --git a/js/sites-list.js b/js/sites-list.js
new file mode 100644
index 0000000..b7a2be0
--- /dev/null
+++ b/js/sites-list.js
@@ -0,0 +1,286 @@
+// You can easily add data here and it will be auto generated
+
+// Web menu
+// A list of websites that will be generated and put on the web menu
+let webSites = [
+	{
+		site: 'Reddit',
+		icon: 'reddit',
+		url: 'https://reddit.com/',
+		category: 'social'
+	},
+	{
+		site: 'Github',
+		icon: 'github',
+		url: 'https://github.com/',
+		category: 'development'
+	},
+	{
+		site: 'Facebook',
+		icon: 'facebook',
+		url: 'https://facebook.com/',
+		category: 'social'
+	},
+	{
+		site: 'Gmail',
+		icon: 'gmail',
+		url: 'https://mail.google.com/',
+		category: 'social'
+	},
+	{
+		site: 'Youtube',
+		icon: 'youtube',
+		url: 'https://youtube.com/',
+		category: 'media'
+	},
+	{
+		site: 'GDrive',
+		icon: 'gdrive',
+		url: 'https://drive.google.com/',
+		category: 'storage'
+	},
+	{
+		site: 'Twitter',
+		icon: 'twitter',
+		url: 'https://twitter.com/',
+		category: 'social'
+	},
+	{
+		site: 'Instagram',
+		icon: 'instagram',
+		url: 'https://instagram.com/',
+		category: 'social'
+	},
+	{
+		site: 'Bitbucket',
+		icon: 'bitbucket',
+		url: 'https://bitbucket.org/',
+		category: 'development'
+	},
+	{
+		site: 'Gitlab',
+		icon: 'gitlab',
+		url: 'https://gitlab.com/',
+		category: 'development'
+	},
+	{
+		site: 'Deviantart',
+		icon: 'deviantart',
+		url: 'https://deviantart.com/',
+		category: 'design'
+	},
+	{
+		site: 'Duckduckgo',
+		icon: 'duckduckgo',
+		url: 'https://duckduckgo.com/',
+		category: 'development'
+	},
+	{
+		site: 'Ecosia',
+		icon: 'ecosia',
+		url: 'https://ecosia.org/',
+		category: 'search engine'
+	},
+	{
+		site: 'Google',
+		icon: 'google',
+		url: 'https://google.com/',
+		category: 'search engine'
+	},
+	{
+		site: 'Wikipedia',
+		icon: 'wikipedia',
+		url: 'https://wikipedia.org/',
+		category: 'information'
+	},
+	{
+		site: 'Unsplash',
+		icon: 'unsplash',
+		url: 'https://unsplash.com/',
+		category: 'design'
+	},
+	{
+		site: 'Twitch',
+		icon: 'twitch',
+		url: 'https://twitch.tv/',
+		category: 'media'
+	},
+	{
+		site: 'Yahoo',
+		icon: 'yahoo',
+		url: 'https://mail.yahoo.com/',
+		category: 'social'
+	},
+	{
+		site: 'Pornhub',
+		icon: 'pornhub',
+		url: 'https://pornhub.com/',
+		category: 'media'
+	},
+	{
+		site: 'Material.io',
+		icon: 'materialio',
+		url: 'https://material.io/',
+		category: 'design'
+	},
+	{
+		site: 'Netflix',
+		icon: 'netflix',
+		url: 'https://netflix.com/',
+		category: 'media'
+	},
+	{
+		site: 'Office 365',
+		icon: 'office365',
+		url: 'https://office.com/',
+		category: 'information'
+	},
+	{
+		site: '4chan',
+		icon: '4chan',
+		url: 'https://4chan.org/',
+		category: 'social'
+	},
+	{
+		site: 'Discord',
+		icon: 'discord',
+		url: 'https://discord.com/',
+		category: 'social'
+	},
+	{
+		site: 'Spotify',
+		icon: 'spotify',
+		url: 'https://spotify.com/',
+		category: 'media'
+	},
+	{
+		site: 'Ebay',
+		icon: 'ebay',
+		url: 'https://ebay.com/',
+		category: 'shopping'
+	},
+	{
+		site: 'JSFiddle',
+		icon: 'jsfiddle',
+		url: 'https://jsfiddle.net/',
+		category: 'development'
+	},
+	{
+		site: 'ArchWiki',
+		icon: 'archwiki',
+		url: 'https://wiki.archlinux.org/',
+		category: 'information'
+	},
+	{
+		site: 'Figma',
+		icon: 'figma',
+		url: 'https://figma.com/',
+		category: 'design'
+	},
+	{
+		site: 'Stackoverflow',
+		icon: 'stackoverflow',
+		url: 'https://stackoverflow.com/',
+		category: 'development'
+	},
+	{
+		site: 'Stackexchange',
+		icon: 'stackexchange',
+		url: 'https://stackexchange.com/',
+		category: 'development'
+	},
+	{
+		site: 'Superuser',
+		icon: 'superuser',
+		url: 'https://superuser.com/',
+		category: 'development'
+	},
+	{
+		site: 'Calendar',
+		icon: 'calendar',
+		url: 'https://calendar.google.com/',
+		category: 'social'
+	},
+	{
+		site: 'Messenger',
+		icon: 'messenger',
+		url: 'https://messenger.com/',
+		category: 'social'
+	},
+	{
+		site: 'Icons8',
+		icon: 'icons8',
+		url: 'https://icons8.com/',
+		category: 'design'
+	},
+	{
+		site: 'Markdown Cheatsheet',
+		icon: 'markdown',
+		url: 'https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet/',
+		category: 'development'
+	},
+	{
+		site: 'Interneting is Hard',
+		icon: 'interneting-is-hard',
+		url: 'https://internetingishard.com/',
+		category: 'development'
+	},
+	{
+		site: 'Keycode',
+		icon: 'keycode',
+		url: 'https://keycode.info/',
+		category: 'development'
+	},
+	{
+		site: 'Soundcloud',
+		icon: 'soundcloud',
+		url: 'https://soundcloud.com/',
+		category: 'media'
+	}
+];
+
+
+// Dock
+// A list of websites that will be generated and put on the dock
+let dockSites = [
+	{
+		site: 'Reddit',
+		icon: 'reddit',
+		url: 'https://reddit.com/'
+	},
+	{
+		site: 'Github',
+		icon: 'github',
+		url: 'https://github.com/'
+	},
+	{
+		site: 'Facebook',
+		icon: 'facebook',
+		url: 'https://facebook.com/'
+	},
+	{
+		site: 'Gmail',
+		icon: 'gmail',
+		url: 'https://mail.google.com/'
+	},
+	{
+		site: 'Youtube',
+		icon: 'youtube',
+		url: 'https://youtube.com/'
+	},
+	{
+		site: 'GDrive',
+		icon: 'gdrive',
+		url: 'https://drive.google.com/'
+	},
+	{
+		site: 'Twitter',
+		icon: 'twitter',
+		url: 'https://twitter.com/'
+	},
+	{
+		site: 'Material.io',
+		icon: 'materialio',
+		url: 'https://material.io/'
+	}
+];
\ No newline at end of file