diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e27d8137..5bcf6b75 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,6 +33,7 @@ import { DialogComponent } from './shared/system-component/dialog/dialog.compone
 import { CodeEditorComponent } from './user-apps/codeeditor/codeeditor.component';
 import { PropertiesComponent } from './shared/system-component/properties/properties.component'; 
 import { MarkDownViewerComponent } from './user-apps/markdownviewer/markdownviewer.component';
+import { FileTreeViewComponent } from './shared/system-component/filetreeview/filetreeview.component';
 
 import { SafeUrlPipe } from './shared/system-pipes/safe.resource.url.pipe';
 import { TruncatePipe } from './shared/system-pipes/string.shorten.pipe';
@@ -73,6 +74,7 @@ import { KeyPressCaptureDirective } from './system-apps/terminal/key.press.captu
     DialogComponent,
     CodeEditorComponent,
     MarkDownViewerComponent,
+    FileTreeViewComponent,
  
 
     HighlightDirective,
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.css b/src/app/shared/system-component/filetreeview/filetreeview.component.css
new file mode 100644
index 00000000..da2f306c
--- /dev/null
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.css
@@ -0,0 +1,98 @@
+  /* Remove default bullets */
+  ul, #fileExplrTreeView {
+      list-style-type: none;
+  }
+    
+  /* Remove margins and padding from the parent ul */
+  #fileExplrTreeView {
+    margin: 0;
+    padding: 0;
+  }
+    
+  /* Style the caret/arrow */
+  .caret {
+    cursor: pointer;
+    user-select: none; /* Prevent text selection */
+    color: #ccc;
+  }
+    
+  /* Create the caret/arrow with a unicode, and style it */
+  .caret::before {
+    content: "\25B6";
+    color: #ccc;
+    display: inline-block;
+    margin-right: 6px;
+  }
+    
+  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+  .caret-down::before {
+    transform: rotate(90deg);
+  }
+    
+  /* Hide the nested list */
+  .nested {
+    display: none;
+  }
+
+  /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
+  .active {
+    display: block;
+  }
+
+  .tree-view-cntnr{
+    display: inline-flex;
+    width: 100%;
+  }
+
+  .fxtreeview-nested-p{
+    position: relative;
+    top: 10%;
+  }
+
+  .fxtreeview-head{
+    padding-left: 5px;
+  }
+
+  .fxtreeview-mid{
+    padding: 0 2px;
+  }
+
+  .fxtreeview-tail{
+    padding: 0 5px;
+    color: white;
+    text-align: left;
+    font-size: 12px;
+    font-weight: normal;
+  }
+
+  .fxtreeview-img{
+    height: 10px;
+    width: 10px;
+    image-rendering:optimizeQuality;
+    position: relative;
+  }
+
+  .fxtreeview-figure{
+    position: relative;
+    align-items: center;
+    display: inline-flex;
+    min-width: 10px;
+    top: 0;
+    left: 15%;
+  }
+
+  .fxtreeview-img1{
+    height: 19px;
+    width: 19px;
+    image-rendering:optimizeQuality;
+    position: relative;
+  }
+
+  .fxtreeview-figure1{
+    position: relative;
+    align-items: center;
+    display: inline-flex;
+    min-width: 19px;
+    top: 0;
+    left: 15%;
+  }
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.html b/src/app/shared/system-component/filetreeview/filetreeview.component.html
new file mode 100644
index 00000000..663bf58e
--- /dev/null
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.html
@@ -0,0 +1,72 @@
+    <!--down-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+    right-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
+        <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
+    </svg> -->
+
+<ul id="fileExplrTreeView">
+    <li>
+        
+        <!-- <span class="caret" id="fileExplrTreeView-{{pid}}" (click)="showChildren()">This PC</span> -->
+
+        <div class="tree-view-cntnr"  id="fileExplrTreeView-{{pid}}" (click)="showCurrentSelection()">
+            <div class="span fxtreeview-head"> 
+                <figure class="fxtreeview-figure">  
+                    <div class="fxtreeview-img">
+                        <svg xmlns="http://www.w3.org/2000/svg" (click)="showChildren()" (mouseenter)="colorChevron()" (mouseleave)="unColorChevron()" [style]="chevronBtnStyle"
+                            height="10" width="10" 
+                            viewBox="0 0 512 512">
+                            <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
+                        </svg>
+                    </div>
+                </figure>
+            </div>
+            <div class="span fxtreeview-mid"><figure class="fxtreeview-figure1"><img class="fxtreeview-img1" [src]="'osdrive/icons/this_pc_94.png'"/> </figure> </div>
+            <div class="span fxtreeview-tail"> <p class="fxtreeview-nested-p"> This PC</p></div>
+        </div>
+
+        <!-- <ul class="nested">
+            <ng-container *ngFor="let node of treeData; let i = index">
+                <li> <span class="caret"  id="fileExplrTreeView-{{pid}}-{{i}}" (click)="showChildren(i)">{{ node.name }}</span>
+                    <ng-container *ngIf="node.children && node.children.length">
+                        <ul class="nested">
+                            <ng-container *ngFor="let child of node.children; let j = index">
+                                <li> <span class="caret" id="fileExplrTreeView-{{pid}}-{{i}}-{{j}}" (click)="showChildren(i,j)">{{ child.name }}</span>
+                                    <ng-container *ngIf="child.children && child.children.length">
+                                        <cos-filetreeview [treeData]="child.children"></cos-filetreeview>
+                                    </ng-container>
+                                </li>
+                            </ng-container>
+                        </ul>
+                    </ng-container>
+                </li>
+            </ng-container>
+        </ul> -->
+    </li>
+</ul>
+
+
+<!--
+<ul id="myUL">
+    <li><span class="caret">This PC</span>
+        <ul class="nested">
+        <li>Water</li>
+        <li>Coffee</li>
+        <li><span class="caret">Tea</span>
+            <ul class="nested">
+            <li>Black Tea</li>
+            <li>White Tea</li>
+            <li><span class="caret">Green Tea</span>
+                <ul class="nested">
+                <li>Sencha</li>
+                <li>Gyokuro</li>
+                <li>Matcha</li>
+                <li>Pi Lo Chun</li>
+                </ul>
+
+            </li>
+            </ul>
+        </li>
+        </ul>
+
+    </li>
+</ul>-->
\ No newline at end of file
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.spec.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.spec.ts
new file mode 100644
index 00000000..8ace5fa0
--- /dev/null
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileTreeViewComponent } from './filetreeview.component';
+
+describe('FiletreeviewComponent', () => {
+  let component: FileTreeViewComponent;
+  let fixture: ComponentFixture<FileTreeViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileTreeViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FileTreeViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/system-component/filetreeview/filetreeview.component.ts b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
new file mode 100644
index 00000000..3aca8c27
--- /dev/null
+++ b/src/app/shared/system-component/filetreeview/filetreeview.component.ts
@@ -0,0 +1,66 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FileTreeNode } from 'src/app/system-files/file.tree.node';
+
+@Component({
+  selector: 'cos-filetreeview',
+  templateUrl: './filetreeview.component.html',
+  styleUrl: './filetreeview.component.css'
+})
+export class FileTreeViewComponent implements OnInit {
+  @Input() treeData: FileTreeNode[] = [];
+  @Input() pid = 0;
+
+  chevronBtnStyle:Record<string, unknown> = {};
+
+
+  ngOnInit():void{
+
+    this.setcolorChevron();
+  }
+
+  showChildren(id?:number, id1?:number):void{
+
+    let ulId = ''
+
+    if(id === undefined && id1 === undefined )
+       ulId = `fileExplrTreeView-${this.pid}`;
+
+    if(id !== undefined && id1 === undefined )
+      ulId = `fileExplrTreeView-${this.pid}-${id}`;
+
+    if(id !== undefined && id1 !== undefined )
+      ulId = `fileExplrTreeView-${this.pid}-${id}-${id1}`;
+
+    console.log('passed id:', ulId);
+    const toggler =  document.getElementById(ulId) as HTMLElement;
+    if(toggler){
+      console.log('toggler:', toggler);
+      toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");
+      toggler.classList.toggle("caret-down");
+    }
+  }
+
+  showCurrentSelection():void{
+   1
+  }
+
+
+  setcolorChevron():void{
+    this.chevronBtnStyle ={
+       'fill': '#ccc'
+    }
+  }
+
+  colorChevron():void{
+    this.chevronBtnStyle ={
+      'fill': 'rgb(18, 107, 240)'
+    }
+  }
+
+  unColorChevron():void{
+    this.chevronBtnStyle ={
+      'fill': '#ccc'
+    }
+  }
+
+}
diff --git a/src/app/shared/system-service/file.service.ts b/src/app/shared/system-service/file.service.ts
index 13a37d62..463098c9 100644
--- a/src/app/shared/system-service/file.service.ts
+++ b/src/app/shared/system-service/file.service.ts
@@ -1,10 +1,10 @@
 import { Injectable } from "@angular/core";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 import { ShortCut } from "src/app/system-files/shortcut";
 import {extname, basename, resolve, dirname} from 'path';
 import { Constants } from "src/app/system-files/constants";
 import { FSModule } from "browserfs/dist/node/core/FS";
-import { FileEntry } from 'src/app/system-files/fileentry';
+import { FileEntry } from 'src/app/system-files/file.entry';
 import { FileMetaData } from "src/app/system-files/file.metadata";
 
 import { Subject } from "rxjs";
diff --git a/src/app/shared/system-service/menu.services.ts b/src/app/shared/system-service/menu.services.ts
index 6c20a564..a544fc4a 100644
--- a/src/app/shared/system-service/menu.services.ts
+++ b/src/app/shared/system-service/menu.services.ts
@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { Subject } from "rxjs";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 import { Process } from "src/app/system-files/process";
 
 
diff --git a/src/app/shared/system-service/trigger.process.service.ts b/src/app/shared/system-service/trigger.process.service.ts
index d1086ab9..baa893a2 100644
--- a/src/app/shared/system-service/trigger.process.service.ts
+++ b/src/app/shared/system-service/trigger.process.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from "@angular/core";
 import { Subject } from "rxjs";
 import { RunningProcessService } from "./running.process.service";
 import { AppDirectory } from "src/app/system-files/app.directory";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 
 @Injectable({
     providedIn: 'root'
diff --git a/src/app/system-apps/audioplayer/audioplayer.component.ts b/src/app/system-apps/audioplayer/audioplayer.component.ts
index 68eeba76..3daa5380 100644
--- a/src/app/system-apps/audioplayer/audioplayer.component.ts
+++ b/src/app/system-apps/audioplayer/audioplayer.component.ts
@@ -6,7 +6,7 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { Process } from 'src/app/system-files/process';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { Constants } from "src/app/system-files/constants";
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';
diff --git a/src/app/system-apps/desktop/desktop.component.ts b/src/app/system-apps/desktop/desktop.component.ts
index a210af96..3bc03bcc 100644
--- a/src/app/system-apps/desktop/desktop.component.ts
+++ b/src/app/system-apps/desktop/desktop.component.ts
@@ -8,7 +8,7 @@ import { BIRDS, GLOBE, HALO, RINGS, WAVE } from './vanta-object/vanta.interfaces
 import { IconsSizes, SortBys } from './desktop.enums';
 import { FileManagerService } from 'src/app/shared/system-service/file.manager.services';
 import { Colors } from './colorutil/colors';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { ScriptService } from 'src/app/shared/system-service/script.services';
 import { MenuService } from 'src/app/shared/system-service/menu.services';
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.css b/src/app/system-apps/fileexplorer/fileexplorer.component.css
index 13d58300..aa308373 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.css
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.css
@@ -737,47 +737,6 @@ span.mid-search-entry{
 }
 
 
-/* Remove default bullets */
-ul, #myUL {
-  list-style-type: none;
-}
-
-/* Remove margins and padding from the parent ul */
-#myUL {
-  margin: 0;
-  padding: 0;
-}
-
-/* Style the caret/arrow */
-.caret {
-  cursor: pointer; 
-  user-select: none; /* Prevent text selection */
-  color: white;
-}
-
-/* Create the caret/arrow with a unicode, and style it */
-.caret::before {
-  content: "\25B6";
-  color: #ccc;
-  display: inline-block;
-  margin-right: 6px;
-}
-
-/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-.caret-down::before {
-  transform: rotate(90deg); 
-}
-
-/* Hide the nested list */
-.nested {
-  display: none;
-}
-
-/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
-.nav-active {
-  display: block;
-}
-
 /*****************************navigation pane view Ended*****************************/
 
 .file-content-container{
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
index 5dcca193..f5d49438 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.html
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -226,30 +226,7 @@
         <div class="fileexp-main-container" #fileExplorerMainContainer>
             <div class="fileexp-content-container">
                 <div class="navigation-content-container"  #navExplorerContainer>
-                <!--down-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
-                right-chevron<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> -->
-                    <ul id="myUL">
-                        <li><span class="caret">This PC</span>
-                          <ul class="nested">
-                            <li>Water</li>
-                            <li>Coffee</li>
-                            <li><span class="caret">Tea</span>
-                              <ul class="nested">
-                                <li>Black Tea</li>
-                                <li>White Tea</li>
-                                <li><span class="caret">Green Tea</span>
-                                  <ul class="nested">
-                                    <li>Sencha</li>
-                                    <li>Gyokuro</li>
-                                    <li>Matcha</li>
-                                    <li>Pi Lo Chun</li>
-                                  </ul>
-                                </li>
-                              </ul>
-                            </li>
-                          </ul>
-                        </li>
-                      </ul>
+                    <cos-filetreeview [treeData]="fileTreeNode" [pid] ="this.processId"></cos-filetreeview>
                 </div>
                 <div class="file-content-container" #fileExplorerContentContainer>
                 <!-- ngResizable [rzHandles]="'w'" [rzMinWidth]="270" -->
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
index 74eab223..eb77f385 100644
--- a/src/app/system-apps/fileexplorer/fileexplorer.component.ts
+++ b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -4,8 +4,8 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { ComponentType } from 'src/app/system-files/component.types';
 import { Process } from 'src/app/system-files/process';
-import { FileEntry } from 'src/app/system-files/fileentry';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileEntry } from 'src/app/system-files/file.entry';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { Subscription } from 'rxjs';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
@@ -23,6 +23,7 @@ import * as htmlToImage from 'html-to-image';
 import { TaskBarPreviewImage } from '../taskbarpreview/taskbar.preview';
 import { MenuService } from 'src/app/shared/system-service/menu.services';
 import { SortBys } from '../desktop/desktop.enums';
+import { FileTreeNode } from 'src/app/system-files/file.tree.node';
 
 @Component({
   selector: 'cos-fileexplorer',
@@ -101,7 +102,8 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
   olClassName = 'ol-icon-size-view';
 
   files:FileInfo[] = [];
-   _fileInfo!:FileInfo;
+  fileTreeNode:FileTreeNode[] = [];
+  _fileInfo!:FileInfo;
   prevPathEntries:string[] = [];
   nextPathEntries:string[] = [];
   recentPathEntries:string[] = [];
@@ -248,6 +250,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
       pathInput: (this.directory !== '/')? this.directory : '/'
     })
   
+    await this.loadFileTreeAsync();
     await this.loadFilesInfoAsync().then(()=>{
       setTimeout(()=>{
         this.captureComponentImg();
@@ -681,6 +684,106 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
     }
   }
 
+  private async loadFileTreeAsync():Promise<void>{
+    this.fileTreeNode = [];
+    this._fileService.resetDirectoryFiles();
+    const directoryEntries  = await this._fileService.getEntriesFromDirectoryAsync(this.directory);
+
+    for(const dirEntry of directoryEntries){
+      const isFile =  await this._fileService.checkIfDirectory(this.directory + dirEntry);
+      const ftn:FileTreeNode = {
+        name : dirEntry,
+        isFile: isFile,
+        children: []
+      }
+
+      console.log('ftn:', ftn);
+      this.fileTreeNode.push(ftn);
+    }
+  }
+
+  private async updateFileTreeAsync(path:string):Promise<void>{
+
+    //const tmpFileTreeNode:FileTreeNode = [];
+    this._fileService.resetDirectoryFiles();
+    const directoryEntries  = await this._fileService.getEntriesFromDirectoryAsync(this.directory + path);
+
+    for(const dirEntry of directoryEntries){
+
+      const isFile =  await this._fileService.checkIfDirectory(this.directory + + dirEntry);
+      const ftn:FileTreeNode = {
+        name : dirEntry,
+        isFile: isFile,
+        children: []
+      }
+
+    }
+  }
+
+  public addChildrenToNode(treeData: FileTreeNode[],  nodeName: string, newChildren: FileTreeNode[] ): FileTreeNode[] {
+
+    // Create a new array for the updated treeData
+    const updatedTreeData: FileTreeNode[] = [];
+
+    for (let i = 0; i < treeData.length; i++) {
+      const node = treeData[i];
+      const updatedNode: FileTreeNode = {
+        name: node.name,
+        isFile: node.isFile,
+        children: node.children || []
+      };
+
+      // If the current node matches the nodeName, add the new children
+      if (node.name === nodeName) {
+        for(const child of newChildren){
+          updatedNode.children.push(child)
+        }
+      }
+
+      // If the node has children, recursively call this function on the children
+      if (node.children) {
+        updatedNode.children = this.addChildrenToNode(node.children, nodeName, newChildren);
+      }
+
+      // Add the updated node to the new treeData array
+      updatedTreeData.push(updatedNode);
+    }
+
+    return updatedTreeData;
+  }
+
+  // public addChildrenToNode(treeData: FileTreeNode[],  nodeName: string, newChildren: string[] ): FileTreeNode[] {
+
+  //   // Create a new array for the updated treeData
+  //   const updatedTreeData: FileTreeNode[] = [];
+
+  //   for (let i = 0; i < treeData.length; i++) {
+  //     const node = treeData[i];
+  //     const updatedNode: FileTreeNode = {
+  //       name: node.name,
+  //       isFile: node.isFile,
+  //       children: node.children ? [] : undefined
+  //     };
+
+  //     // If the current node matches the nodeName, add the new children
+  //     if (node.name === nodeName) {
+  //       updatedNode.children = (node.children || []).concat(
+  //         newChildren.map(childName => ({ name: childName, isFile: node.isFile}))
+  //       );
+  //     }
+
+  //     // If the node has children, recursively call this function on the children
+  //     if (node.children) {
+  //       updatedNode.children = this.addChildrenToNode(node.children, nodeName, newChildren);
+  //     }
+
+  //     // Add the updated node to the new treeData array
+  //     updatedTreeData.push(updatedNode);
+  //   }
+
+  //   return updatedTreeData;
+  // }
+
   async runProcess(file:FileInfo):Promise<void>{
 
     console.log('fileexplorer-runProcess:',file)
diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
index 0409c5ac..f0dc77bf 100644
--- a/src/app/system-apps/filemanager/filemanager.component.ts
+++ b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -5,8 +5,8 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro
 import { ComponentType } from 'src/app/system-files/component.types';
 import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { Process } from 'src/app/system-files/process';
-import { FileEntry } from 'src/app/system-files/fileentry';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileEntry } from 'src/app/system-files/file.entry';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { Subscription } from 'rxjs';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { FileManagerService } from 'src/app/shared/system-service/file.manager.services';
diff --git a/src/app/system-apps/photoviewer/photoviewer.component.ts b/src/app/system-apps/photoviewer/photoviewer.component.ts
index 829292ad..4e0b82a8 100644
--- a/src/app/system-apps/photoviewer/photoviewer.component.ts
+++ b/src/app/system-apps/photoviewer/photoviewer.component.ts
@@ -7,7 +7,7 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { Process } from 'src/app/system-files/process';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';
 import { StateType } from 'src/app/system-files/state/state.type';
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
diff --git a/src/app/system-apps/taskbarentries/taskbarentries.component.ts b/src/app/system-apps/taskbarentries/taskbarentries.component.ts
index ba961413..3f5b9f99 100644
--- a/src/app/system-apps/taskbarentries/taskbarentries.component.ts
+++ b/src/app/system-apps/taskbarentries/taskbarentries.component.ts
@@ -5,7 +5,7 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { ComponentType } from 'src/app/system-files/component.types';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { Process } from 'src/app/system-files/process';
 
 @Component({
diff --git a/src/app/system-apps/taskbarpreview/taskbarpreview.component.html b/src/app/system-apps/taskbarpreview/taskbarpreview.component.html
index 8411b93d..fd8b29ec 100644
--- a/src/app/system-apps/taskbarpreview/taskbarpreview.component.html
+++ b/src/app/system-apps/taskbarpreview/taskbarpreview.component.html
@@ -19,7 +19,7 @@ <h1 class="taskbar-preview-h1">
                 </nav>
             </div>
         </div>
-        <div class="taskbar-preview-image-container"  (contextmenu)="showTaskBarPreviewContextMenu($event, cmpntImage.pid)" (mouseenter)="setWindowToFocus(cmpntImage.pid)" (mouseleave)="restoreWindow(cmpntImage.pid)">
+        <div class="taskbar-preview-image-container"  (contextmenu)="showTaskBarPreviewContextMenu($event, cmpntImage.pid)" (mouseenter)="setWindowToFocus(cmpntImage.pid)" (mouseleave)="restoreWindow(cmpntImage.pid)"  (click)="showWindow(cmpntImage.pid)">
             <figure class="taskbar-preview-figure1">
                 <img  [ngClass]="cmpntImage.imageData ? 'taskbar-preview-img1-sec':'taskbar-preview-img1-pri'" [src]="cmpntImage.imageData || icon"/>
             </figure>
diff --git a/src/app/system-apps/taskbarpreview/taskbarpreview.component.ts b/src/app/system-apps/taskbarpreview/taskbarpreview.component.ts
index 33723e6e..fdd55ec9 100644
--- a/src/app/system-apps/taskbarpreview/taskbarpreview.component.ts
+++ b/src/app/system-apps/taskbarpreview/taskbarpreview.component.ts
@@ -85,4 +85,8 @@ export class TaskBarPreviewComponent implements OnChanges, AfterViewInit {
     this._runningProcessService.restoreProcessWindowNotify.next(pid);
   }
 
+  showWindow(pid:number):void{
+    this._runningProcessService.restoreProcessWindowNotify.next(pid);
+  }
+
 }
diff --git a/src/app/system-apps/taskmanager/taskmanager.mini.component.ts b/src/app/system-apps/taskmanager/taskmanager.mini.component.ts
index c4f701f4..4688a76d 100644
--- a/src/app/system-apps/taskmanager/taskmanager.mini.component.ts
+++ b/src/app/system-apps/taskmanager/taskmanager.mini.component.ts
@@ -6,7 +6,7 @@ import { StateManagmentService } from 'src/app/shared/system-service/state.manag
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { ComponentType } from 'src/app/system-files/component.types';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { Process } from 'src/app/system-files/process';
 
 @Component({
diff --git a/src/app/system-apps/terminal/terminal.commands.ts b/src/app/system-apps/terminal/terminal.commands.ts
index 77c10fb5..71b4d65e 100644
--- a/src/app/system-apps/terminal/terminal.commands.ts
+++ b/src/app/system-apps/terminal/terminal.commands.ts
@@ -1,12 +1,12 @@
 import { TerminalCommand } from "./model/terminal.command";
 import { AppDirectory } from "src/app/system-files/app.directory";
 import { TriggerProcessService } from "src/app/shared/system-service/trigger.process.service";
-import { FileInfo } from "src/app/system-files/fileinfo";
+import { FileInfo } from "src/app/system-files/file.info";
 import { RunningProcessService } from "src/app/shared/system-service/running.process.service";
 import { StateManagmentService } from "src/app/shared/system-service/state.management.service";
 import {extname, basename, resolve, dirname} from 'path';
 import { FileService } from "src/app/shared/system-service/file.service";
-import { FileEntry } from 'src/app/system-files/fileentry';
+import { FileEntry } from 'src/app/system-files/file.entry';
 
 
 export interface OctalRepresentation {
diff --git a/src/app/system-apps/texteditor/texteditor.component.ts b/src/app/system-apps/texteditor/texteditor.component.ts
index b77204bd..0a2c783d 100644
--- a/src/app/system-apps/texteditor/texteditor.component.ts
+++ b/src/app/system-apps/texteditor/texteditor.component.ts
@@ -10,7 +10,7 @@ import { ScriptService } from 'src/app/shared/system-service/script.services';
 import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { ComponentType } from 'src/app/system-files/component.types';
 import { Process } from 'src/app/system-files/process';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';
 import { StateType } from 'src/app/system-files/state/state.type';
 import { TaskBarPreviewImage } from '../taskbarpreview/taskbar.preview';
diff --git a/src/app/system-apps/videoplayer/videoplayer.component.ts b/src/app/system-apps/videoplayer/videoplayer.component.ts
index 2f7ca902..1563c254 100644
--- a/src/app/system-apps/videoplayer/videoplayer.component.ts
+++ b/src/app/system-apps/videoplayer/videoplayer.component.ts
@@ -6,7 +6,7 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { Process } from 'src/app/system-files/process';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { Constants } from "src/app/system-files/constants";
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';
 import { StateType } from 'src/app/system-files/state/state.type';
diff --git a/src/app/system-files/fileentry.ts b/src/app/system-files/file.entry.ts
similarity index 100%
rename from src/app/system-files/fileentry.ts
rename to src/app/system-files/file.entry.ts
diff --git a/src/app/system-files/fileinfo.ts b/src/app/system-files/file.info.ts
similarity index 100%
rename from src/app/system-files/fileinfo.ts
rename to src/app/system-files/file.info.ts
diff --git a/src/app/system-files/file.tree.node.ts b/src/app/system-files/file.tree.node.ts
new file mode 100644
index 00000000..db97c91a
--- /dev/null
+++ b/src/app/system-files/file.tree.node.ts
@@ -0,0 +1,5 @@
+export interface FileTreeNode{
+    name: string;
+    isFile:boolean;
+    children: FileTreeNode[];
+}
\ No newline at end of file
diff --git a/src/app/user-apps/jsdos/jsdos.component.ts b/src/app/user-apps/jsdos/jsdos.component.ts
index 28f247c3..a9423de6 100644
--- a/src/app/user-apps/jsdos/jsdos.component.ts
+++ b/src/app/user-apps/jsdos/jsdos.component.ts
@@ -10,7 +10,7 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { Process } from 'src/app/system-files/process';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';
 import { StateType } from 'src/app/system-files/state/state.type';
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
diff --git a/src/app/user-apps/markdownviewer/markdownviewer.component.ts b/src/app/user-apps/markdownviewer/markdownviewer.component.ts
index f3cd443d..ddceae75 100644
--- a/src/app/user-apps/markdownviewer/markdownviewer.component.ts
+++ b/src/app/user-apps/markdownviewer/markdownviewer.component.ts
@@ -15,7 +15,7 @@ import * as htmlToImage from 'html-to-image';
 import { TaskBarPreviewImage } from 'src/app/system-apps/taskbarpreview/taskbar.preview';
 import { ScriptService } from 'src/app/shared/system-service/script.services';
 import { FileService } from 'src/app/shared/system-service/file.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { SessionManagmentService } from 'src/app/shared/system-service/session.management.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 declare const marked:any;
diff --git a/src/app/user-apps/ruffle/ruffle.component.ts b/src/app/user-apps/ruffle/ruffle.component.ts
index 9cc5ef7f..61f8a97a 100644
--- a/src/app/user-apps/ruffle/ruffle.component.ts
+++ b/src/app/user-apps/ruffle/ruffle.component.ts
@@ -6,7 +6,7 @@ import { Process } from 'src/app/system-files/process';
 import {extname} from 'path';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
-import { FileInfo } from 'src/app/system-files/fileinfo';
+import { FileInfo } from 'src/app/system-files/file.info';
 import { AppState, BaseState } from 'src/app/system-files/state/state.interface';
 import { StateType } from 'src/app/system-files/state/state.type';
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
diff --git a/src/osdrive/icons/this_pc_94.png b/src/osdrive/icons/this_pc_94.png
new file mode 100644
index 00000000..05d59950
Binary files /dev/null and b/src/osdrive/icons/this_pc_94.png differ