diff --git a/site/pages/index.js b/site/pages/index.js
index 960c373..35201c6 100644
--- a/site/pages/index.js
+++ b/site/pages/index.js
@@ -6,16 +6,44 @@ import styles from '../styles/Home.module.css'
 export default function Home({ searchText }) {
 
   const [workspaces, setWorkspaces] = useState(null)
+  const [versions, setVersions] = useState(null)
+  const [version, setVersion] = useState(null)
 
   useEffect(() => {
+    let currentVersion = localStorage.getItem("version") || null
     fetch('list.json')
       .then((res) => res.json())
       .then((workspaces) => {
+        let wsversions = []
+        workspaces.workspaces.forEach((workspace) => {
+          if(workspace.compatibility) {
+            workspace.compatibility.forEach((v) => {
+              const value = parseFloat(v)
+              if(wsversions.indexOf(value) === -1) {
+                wsversions.push(value)
+              }
+            })
+          }
+        })
+        const sorted = wsversions.sort((a,b) => a-b).reverse()
+
+        setVersions(sorted)
+        if (currentVersion === null) {
+          currentVersion = sorted[0]
+          localStorage.setItem("version", currentVersion);
+        }
+        setVersion(currentVersion)
         setWorkspaces(workspaces)
       })
   }, [])
 
+  const updateVersion = (version) => {
+    localStorage.setItem("version", version);
+    setVersion(version)
+  }
+
   let filteredworkspaces = workspaces && workspaces.workspaces && workspaces.workspaces.length > 0 ? [...workspaces.workspaces] : [];
+  filteredworkspaces = filteredworkspaces.filter((v) => v.compatibility.some((el) => el === version + '.x'))
   const lowerSearch = searchText && searchText.toLowerCase();
   if (searchText && searchText !== "") {
     filteredworkspaces = filteredworkspaces.filter((i) => {
@@ -40,7 +68,18 @@ export default function Home({ searchText }) {
 
 
       <main className="p-8 py-10 xl:px-20">
-      <h1 className='flex uppercase tracking-widest justify-center mb-10'><span className='flex items-center text-lg bg-slate-100/90 rounded overflow-hidden shadow'><span className='flex px-3 text-xs opacity-100'>Workspaces</span> <span className='text-white p-3 py-1 flex bg-[#2980b9]'>{workspaces && workspaces.workspacecount}</span></span></h1>
+        <h1 className='flex flex-wrap-reverse uppercase tracking-widest justify-center mb-10 gap-5'>
+        <span className='flex items-center text-lg bg-slate-100/90 rounded overflow-hidden shadow'>
+            <span className='flex px-3 text-xs opacity-100'>Workspaces</span>
+            <span className='text-white p-3 py-1 flex bg-[#2980b9]'>{workspaces && workspaces.workspacecount}</span>
+          </span>
+          <span className='flex items-center text-lg bg-slate-100/90 rounded overflow-hidden shadow'>
+            <span className='flex px-3 text-xs opacity-100'>Kasm Version</span>
+            <span className='text-white gap-3 p-3 py-1 flex items-center bg-[#2980b9]'>{versions && versions.map((v) => (
+              <div className={'cursor-pointer ' + (+v === +version ? 'text-white' : 'text-white/50 text-xs')} key={v} onClick={() => updateVersion(v)}>{v}</div>
+            ))}</span>
+          </span>
+        </h1>
         <div className="flex flex-wrap gap-1 justify-center">
         {filteredworkspaces && filteredworkspaces.length > 0 && filteredworkspaces.map(function (workspace, i) {
             return <Workspace key={workspace.sha} workspace={workspace} />