diff --git a/src/css/xrforge.css b/src/css/xrforge.css
index bd77dd7..258e5d4 100644
--- a/src/css/xrforge.css
+++ b/src/css/xrforge.css
@@ -20,6 +20,10 @@
 .margin1{ margin: 10px 20px; }
 .padding1{ padding: 10px 20px 10px 20px; }
 
+.content{
+  font-family: sans-serif;
+  letter-spacing: 0.01em;
+}
 
 *{
   margin:0;
@@ -197,6 +201,8 @@ ul{
 .menu a {
   padding-right:30px;
   color:#FFF;
+  font-weight:normal !important;
+  font-family:sans-serif;
 }
 
 .grid .tile{ border-radius:5px; }
diff --git a/src/css/xrforge.max.css b/src/css/xrforge.max.css
index 872a751..b48611e 100644
--- a/src/css/xrforge.max.css
+++ b/src/css/xrforge.max.css
@@ -4,7 +4,7 @@ body{
 
 .grid .tile .img{
   visibility: visible;
-  border:1px dotted #223;
+  border:1px solid #223;
   background-size:cover;
   background-position:center;
   background-repeat: no-repeat;
@@ -15,7 +15,7 @@ body{
   margin: 0px 15px 15px 0px;
   width:31%;
   float:left;
-  background-color:#333;
+  background-color:#2230;
 }
 
 @media (max-width: 890px){
@@ -48,8 +48,12 @@ body{
   font-size:14px;
 }
 
-.grid .tile img.icon{
-  transform: translate(0,-3px);
+.grid .tile img.icon.folder{
+  transform: translate(0,-2px);
+}
+.grid .tile img.icon.play{
+  filter: invert(1);
+  transform: translate(0,-1px);
 }
 
 .clear{
diff --git a/src/img/play.svg b/src/img/play.svg
new file mode 100644
index 0000000..c0fb753
--- /dev/null
+++ b/src/img/play.svg
@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5Z"
+    fill="currentColor"
+  />
+  <path d="M16 12L10 16.3301V7.66987L16 12Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/page/dir.html b/src/page/dir.html
index bf2e273..4074a44 100644
--- a/src/page/dir.html
+++ b/src/page/dir.html
@@ -17,7 +17,23 @@ end}
 end}
 
 <div class="grid">
-  ${html_items}
+  {if items then 
+    for i=1,#items do 
+      local item = items[i]
+      local icon = 'folder'
+      if item.view3D or item.portal3D == false then icon = 'play' end
+      print([[
+        <div class="tile">
+          <a href="]] .. item.url .. [[">
+            <div class="img" style="background-image: url(]] .. item.thumbnail .. [[);"></div>
+            <div class="text">
+              <img src="img/]] .. icon .. [[.svg" class="icon ]] .. icon .. [["/>&nbsp;]] .. item.title .. [[ 
+            </div>
+          </a>
+        </div>
+      ]])
+    end
+  end}
 </div>
 
 ${footer}
diff --git a/src/page/dir.lua b/src/page/dir.lua
index f4b2995..8572bd7 100644
--- a/src/page/dir.lua
+++ b/src/page/dir.lua
@@ -5,7 +5,6 @@ local util = require("util")
 return {
 
   middleware = function(req,res,next)
-    local tile = require('page/partial/tile')
     local rootpath = "/" .. app.opts.plugin_diskscan_dirname 
     local urlpath  = GetPath()
     res.items    = {}
@@ -55,7 +54,6 @@ return {
           items = {},
           parent=res.parent
         },{ opts = app.opts })
-        data.tile = tile
         local i = 0
         foreach( res.items, function(k,v)
           -- position items for janusxr JML (dir.html)
@@ -67,8 +65,6 @@ return {
             local port = ':' .. GetPort()
             if port == 80 then port = '' end
             data.url = GetScheme() .. '://' .. GetHost() .. port ..  v.url 
-          else
-            data.html_items = data.html_items .. tile({item=v})
           end
         end)
         if data.item then
diff --git a/src/page/index.html b/src/page/index.html
index 31b09eb..8ba85ec 100644
--- a/src/page/index.html
+++ b/src/page/index.html
@@ -4,7 +4,7 @@ ${header}
 
 {if item and item.parent and item.parent.info then 
   print([[
-    <div id="popup">
+    <div id="popup" class="content">
       <img src="/img/close.svg" class="icon close" onclick="document.querySelector('#popup').style.display = 'none'"/>
       <div class="spectrum span">
         <div></div>
diff --git a/src/plugin/diskscan.lua b/src/plugin/diskscan.lua
index e277f36..8f06571 100644
--- a/src/plugin/diskscan.lua
+++ b/src/plugin/diskscan.lua
@@ -106,7 +106,8 @@ return {
         and not me.shouldHideFile(name) then
         seen[ino] = experience -- prevent recursion with symlinks
         print("✅ ".. fullpath .. " " ..ino)
-        experience.dir = true
+        experience.dir    = true
+        experience.portal3D = true -- can be viewed as 3d portal
         app.pub("scan_experience", nil, experience)
         app.cache.items[ino] = experience
         me.scanDir(fullpath,experience,seen,symlinks)
diff --git a/src/plugin/xrfragments.lua b/src/plugin/xrfragments.lua
index 6bea5da..ef32cfa 100644
--- a/src/plugin/xrfragments.lua
+++ b/src/plugin/xrfragments.lua
@@ -19,6 +19,7 @@ app.on('scan_experience_file', function(exp)
         if util.fileExist( sfile ) then 
           exp.sidecarfile[ sidecarExt ] = "/" .. util.stripPath(sfile)
           exp.view3D = true 
+          exp.parent.portal3D = false
         end
       end)
       -- set thumbnail if any