diff --git a/__pycache__/app.cpython-313.pyc b/__pycache__/app.cpython-313.pyc
index c747fd4..d755bd5 100644
Binary files a/__pycache__/app.cpython-313.pyc and b/__pycache__/app.cpython-313.pyc differ
diff --git a/app.py b/app.py
index a8a0632..d3584f1 100644
--- a/app.py
+++ b/app.py
@@ -3,6 +3,7 @@ import subprocess
 from flask import Flask , send_from_directory , request , jsonify
 from flask_flatpages import FlatPages
 from flask import render_template
+import random
 import os
 
 FLATPAGES_EXTENSION = '.md'
@@ -43,9 +44,17 @@ def imagelist(articlename):
         return None, None
 
 
+def get_front_img():
+    img_dir=os.getcwd()+'/pages/front/'
+    if os.path.exists(img_dir):
+        images = [f for f in os.listdir(img_dir) if f.endswith('.jpg') or f.endswith('.jpeg') or f.endswith('.png') or f.endswith('.gif')]
+        fimg = random.choice(images)
+        return fimg 
+
 @app.route('/')
 def index():
     # Articles are pages with a publication date
+    fimg = get_front_img()
     news = pages.get('news')
     info = pages.get('info')
     articles = (p for p in pages if 'published' in p.meta  and 'static' not in p.meta)
@@ -55,7 +64,7 @@ def index():
     for a in latest:
         g_path, imgs = imagelist(a.path)
         imgDict[a.path]=imgs
-    return render_template('index.html', articles=latest ,imgDict=imgDict , news=news , info = info)
+    return render_template('index.html', articles=latest ,imgDict=imgDict , news=news , info = info , fimg = fimg)
 
 
 @app.route('/<path:path>')
diff --git a/pages/front/EDC.jpg b/pages/front/EDC.jpg
new file mode 100644
index 0000000..ac36d3e
Binary files /dev/null and b/pages/front/EDC.jpg differ
diff --git a/pages/front/ESC.jpg b/pages/front/ESC.jpg
new file mode 100644
index 0000000..62813b8
Binary files /dev/null and b/pages/front/ESC.jpg differ
diff --git a/pages/front/GWG.jpg b/pages/front/GWG.jpg
new file mode 100644
index 0000000..f349a6a
Binary files /dev/null and b/pages/front/GWG.jpg differ
diff --git a/pages/front/LDW.jpg b/pages/front/LDW.jpg
new file mode 100644
index 0000000..7665326
Binary files /dev/null and b/pages/front/LDW.jpg differ
diff --git a/pages/front/VMN.jpg b/pages/front/VMN.jpg
new file mode 100644
index 0000000..0290a03
Binary files /dev/null and b/pages/front/VMN.jpg differ
diff --git a/pages/front/WSB.jpg b/pages/front/WSB.jpg
new file mode 100644
index 0000000..30f6352
Binary files /dev/null and b/pages/front/WSB.jpg differ
diff --git a/static/main.js b/static/main.js
index 1b85aa5..857aa31 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,3 +1,4 @@
+
 $(document).ready(function() {
     
     var imgW =  $(".gal .img_container").width()
@@ -8,6 +9,7 @@ $(document).ready(function() {
     $(this).find(".content-wrapper").addClass('open');   
 });
 
+
 $("a.news").click(function(){
     $("#news").toggleClass('open');
 });   
@@ -22,7 +24,9 @@ $(".closebtn").click(function(e){
     console.log("Close button clicked - should remove 'open' class");
 });
 
-
+$("#bg").click(function(){
+    $(this).css('display','none');
+});
     
     //
     //$(".alist").on("click", "li",function(){
diff --git a/static/style.css b/static/style.css
index 2ce164d..cc10736 100644
--- a/static/style.css
+++ b/static/style.css
@@ -50,6 +50,33 @@ body{
 }
 
 
+
+#bg{
+    width:100vw;
+    height:100vh;
+    background:rgba(255,255,255,0.7);
+    position: fixed;
+    z-index: 100000;
+    top:0;
+    left:0;
+}
+
+#bg #img_full {
+    z-index: 100000;
+    width: 50vw;
+    height:auto;
+    margin:auto;
+    margin-top:10vh;
+}
+
+
+#bg #img_full img{
+    min-width: 100%;
+    height: auto;
+    display: block;
+    
+}
+
 nav {
     position : fixed ;
     background: #fff;
@@ -61,12 +88,32 @@ nav {
 .closebtn{
     width:50px;
     height:50px;
-    background:red;
     top:30px;
     right:20px;
     position: absolute;
-    z-index: 1000000;
+    opacity: 0.3;
+}
+
+.closebtn:hover {
+  opacity: 1;
+}
+.closebtn:before, .closebtn:after {
+  position: absolute;
+  left: 15px;
+  content: ' ';
+  height: 33px;
+  width: 2px;
+  background-color: #333;
+}
+.closebtn:before {
+  transform: rotate(45deg);
 }
+.closebtn:after {
+  transform: rotate(-45deg);
+}
+
+
+
 
 
 #content{
@@ -169,7 +216,7 @@ a:hover{
     background: #e6e6e6; 
     cursor: pointer;
     position:sticky;
-    width:99.5%;
+    width:99.9%;
     top:110px;
     z-index:10000;
 }
@@ -202,7 +249,7 @@ a:hover{
     height:20px;
     content: ' ▲';
     right:0;
-    font-size: 0.5em;
+    font-size: 1em;
 }
 
 .legend li.sort-desc::after {
@@ -211,7 +258,7 @@ a:hover{
     height:20px;
     right:0;
     content: ' ▼';
-    font-size: 0.5em;
+    font-size: 1em;
 }
 .legend li:last-of-type {
     border-right: none;
@@ -233,6 +280,7 @@ ul.legend {
     list-style:none;
     padding:0 0 0 0px;
     margin:0;
+    margin-top:20px
 }
 
 
diff --git a/templates/index.html b/templates/index.html
index 2a08314..8e7cb22 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,6 +10,7 @@
   <body>
 
     {% include 'menu.html' %}
+    {% include 'over.html' %}
 <div id="content">
     
 
diff --git a/templates/over.html b/templates/over.html
new file mode 100644
index 0000000..9ddd4cf
--- /dev/null
+++ b/templates/over.html
@@ -0,0 +1,5 @@
+<div id="bg">
+    <div id="img_full">
+<img src="pages/front/{{fimg}}" alt="front image">
+</div>
+</div>