diff --git a/public/deramiv.html b/public/deramiv.html
new file mode 100644
index 0000000000000000000000000000000000000000..e7f57d92f5a2161523c0bd78428092971e2673b8
--- /dev/null
+++ b/public/deramiv.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AMIV</title>
+
+    <link href="bs/css/bootstrap.min.css" rel="stylesheet">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+    <script src="bs/js/bootstrap.min.js"></script>
+    <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
+
+    <link href="css/logo-nav.css" rel="stylesheet">
+    <link href="css/cards.css" rel="stylesheet">
+    <link href="css/dynamic.css" rel="stylesheet">
+    <style>
+        .grid-item-content {
+            height: 100px;
+            background: #D26;
+            border: 2px solid hsla(0, 0%, 0%, 0.5);
+            border-radius: 5px;
+        }
+
+        .grid-item-content--height2 {
+            height: 200px;
+        }
+    </style>
+</head>
+
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">
+                    <img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
+                </a>
+            </div>
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a href="#">Home</a>
+                    </li>
+                    <li>
+                        <a href="#">Der AMIV</a>
+                    </li>
+                    <li>
+                        <a href="#">Studium</a>
+                    </li>
+                    <li>
+                        <a href="#">Jobbörse</a>
+                    </li>
+                    <form class="navbar-form navbar-left" role="search">
+                        <div class="form-group">
+                            <input type="text" class="form-control" placeholder="Search">
+                        </div>
+                        <button type="submit" class="btn btn-default">Search</button>
+                    </form>
+                </ul>
+            </div>
+            <!-- /.navbar-collapse -->
+        </div>
+        <!-- /.container -->
+    </nav>
+
+    <div class="container-fluid">
+	    <div class="grid">
+		    <div class="grid-sizer"></div>
+		    
+				<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+					<div class="card">
+						<div class="card-image">
+							<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTWlKmVgsFszoyjRfd258A2yx_DbI_5GLSd_VxRcRJvEup5tbxReA">
+						</div>
+            
+						<div class="card-content">
+							<p>Das ist der AMIV </p>
+						</div>
+	                
+						<div class="card-action">
+							<a href="#" target="new_blank">Der AMIV</a>
+						</div>
+					</div>
+    			</div>
+        
+				<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+					<div class="card">
+						<div class="card-image">
+							<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
+						</div>
+            
+						<div class="card-content" >
+							<p>Du suchst etwas Abwechslung vom Studienalltag? Du möchtest dich im AMIV oder einer Kommission engagieren? Dann bist du hier richtig!</p>
+						</div>
+                
+						<div class="card-action">
+							<a href="#" target="new_blank">Get involved!</a>
+            			</div>
+        			</div>
+        		</div>
+        
+				<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+					<div class="card">
+						<div class="card-image">
+							<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
+						</div>
+            
+						<div class="card-content" >
+							<p> Hier werden aktuelle und alte Vorstände und ihre Funktionen aufgelistet</p>
+						</div>
+                
+						<div class="card-action">
+							<a href="#" target="new_blank">Vorstand</a>
+            			</div>
+        			</div>
+        		</div>
+        
+				<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+					<div class="card">
+						<div class="card-image">
+							<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
+						</div>
+            
+						<div class="card-content">
+							<p> jflglruhldkjfhlkrhdlkjfhlkjlkm <br> <br> <br> <br></p>
+						</div>
+                
+						<div class="card-action">
+							<a href="#" target="new_blank">Protokolle</a>
+            			</div>
+        			</div>
+        		</div>   
+        		     
+        		<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+					<div class="card">
+						<div class="card-image">
+							<img class="img-responsive" src="http://img.funcloud.com/original/2016/03/6673151175913860553464650-374591.jpg">
+						</div>
+            
+						<div class="card-content">
+							 <p>ihgfd</p>
+						</div>
+                
+						<div class="card-action">
+							<a href="#" target="new_blank">Impessum/kontakt</a>
+            			</div>
+        			</div>
+        		</div> 
+        		       	
+        </div>
+    </div>
+        
+<script>
+	 $('.grid').masonry({
+		 itemSelector: '.grid-item',
+		 originLeft: false
+	 });
+</script>
+        
+    
+	</body>
+</html>
diff --git a/public/index.html b/public/index.html
index 5523635138db0a2236550dc84fb42358624f87de..56b98553e82b47a899d187c93aae55e3c63efd33 100644
--- a/public/index.html
+++ b/public/index.html
@@ -138,6 +138,7 @@
 					var register = "";
 					if (/* amivcore.authenticated() &&  */item.spot >= 0 && regstart > heute && regend < heute){
 						register = "Anmelden";
+
 					}
                     addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.img_banner+'"><date><div class="month">'+month[datenum.getMonth()]+'</div><div class="day">'+datenum.getDate()+'</div><div class="starttime">'+datenum.getHours()+':'+minutes+'</div><date-overlay></date-overlay></date><span class="card-title">'+item.title_de+' @ '+item.location+'</span></div><div class="card-content">'+item.description_de+'</div><div class="card-action"><a href="#" target="new_blank">Zum Event</a><a href="#" target="new_blank">'+register+'</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
                 });
diff --git a/public/joboffers.html b/public/joboffers.html
new file mode 100644
index 0000000000000000000000000000000000000000..2c6fa15c2a98fad4a4a0f3d2280ca0f1e0e6a83d
--- /dev/null
+++ b/public/joboffers.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AMIV</title>
+
+    <link href="bs/css/bootstrap.min.css" rel="stylesheet">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+    <script src="bs/js/bootstrap.min.js"></script>
+    <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
+
+    <link href="css/logo-nav.css" rel="stylesheet">
+    <link href="css/cards.css" rel="stylesheet">
+    <link href="css/dynamic.css" rel="stylesheet">
+    <style>
+        .grid-item-content {
+            height: 100px;
+            background: #D26;
+            border: 2px solid hsla(0, 0%, 0%, 0.5);
+            border-radius: 5px;
+        }
+
+        .grid-item-content--height2 {
+            height: 200px;
+        }
+    </style>
+</head>
+
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">
+                    <img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
+                </a>
+            </div>
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse nav-collapse collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a href="#">Home</a>
+                    </li>
+                    <li>
+                        <a href="#">Der AMIV</a>
+                    </li>
+                    <li>
+                        <a href="#">Studium</a>
+                    </li>
+                    <li>
+                        <a href="#">Jobbörse</a>
+                    </li>
+                </ul>
+            </div>
+            <!-- /.navbar-collapse -->
+        </div>
+        <!-- /.container -->
+    </nav>
+
+    <div class="container-fluid">
+        <div class="grid">
+            <div class="grid-sizer"></div>
+            <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+	           	<div class="card">
+						<script type="text/javascript">
+				 			!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+						</script> 
+        		</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function getEvents(callback) {
+            callback = callback || function(ret) {
+                console.log(ret);
+            }
+            $.getJSON('https://amiv-apidev.vsos.ethz.ch/joboffers/', callback);
+        }
+
+        function addElement(item) {
+            $('.grid')
+                .append('<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' + item + '</div>');
+        }
+        
+        $(document).ready(function() {
+            $('.grid-item, .grid-sizer').addClass('col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2');
+            $('.grid').masonry({
+                itemSelector: '.grid-item',
+                columnWidth: '.grid-sizer',
+                percentPosition: true,
+                originLeft: false
+            }).on('DOMSubtreeModified', function(){
+	            $(this).masonry('reloadItems').masonry();
+            })
+            getEvents(function(ret) {
+                ret['_items'].forEach(function(item) {
+	            	console.log(item.title_de);
+	            	
+	            	/*Logo Checker*/
+                    if (item.logo == null){
+						item.logo = "https://s-media-cache-ak0.pinimg.com/736x/9c/24/fd/9c24fdb71c67e31efef540efb141f96d.jpg";
+                    }
+                    /* Datum anpassen*/
+                   	if (item.time_end != null){
+						var regend = new Date(item.time_end);
+						var heute = new Date(Date.now());
+					
+						/*Anmeldung*/
+						var register = "";
+						if (regend < heute){
+							return;
+						}
+                   }
+                   
+                    addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.logo+'"><span class="card-title">'+item.title_de+' bei '+item.company+'</span></div><div class="card-content">'+item.description_de+'</div><div class="card-action"><a href="#" target="new_blank">Zum Event</a><a href="#" target="new_blank">Anmelden</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
+                });
+            });
+        });
+    </script>
+<script src="js/main.js"></script>
+</body>
+
+</html>