diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0f2db670..f7294fcd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { AngularDraggableModule } from 'ngx-draggable-resize';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -60,7 +61,8 @@ import { LongPressDirective } from './system-apps/audioplayer/long.press.directi
   imports: [
     BrowserModule,
     AngularDraggableModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/shared/system-service/file.service.ts b/src/app/shared/system-service/file.service.ts
index d8c58024..3ba55bfd 100644
--- a/src/app/shared/system-service/file.service.ts
+++ b/src/app/shared/system-service/file.service.ts
@@ -298,13 +298,40 @@ export class FileService{
 
         new Promise((resolve, reject) =>{
 
-            this._fileSystem.unlink(path,(err) =>{
+            // const basePath = basename(path)
+            // const fileExt = extname(path)
+            // const dir = dirname(path);
+
+            // console.log('basePath:',basePath);
+            // console.log('fileExt:',fileExt);
+            // console.log('dir:',dir);
+
+            // console.log('current path:', path);
+            // console.log('file rename:', `${dir}/${newFileName}${fileExt}`);
+
+
+            this._fileSystem.readFile(path,(err, contents = Buffer.from('')) =>{
                 if(err){
-                    console.log('deleteFileAsync error:',err)
+                    console.log('getFile in renameFileAsync error:',err)
                     reject(err)
+                }else{
+                    this._fileSystem.writeFile(`${dirname(path)}/${newFileName}${extname(path)}`,contents,(err)=>{  
+                        if(err){
+                            console.log('writeFile in renameFileAsync error:',err);
+                            reject(err);
+                        }else{
+                            this._fileSystem.unlink(path,(err) =>{
+                                if(err){
+                                    console.log('deleteFileAsync error:',err)
+                                    reject(err)
+                                }
+                                resolve(console.log('successfully deleted'));
+                            });
+                            resolve(console.log('successfully renamed'));
+                        }
+                    });
+                    resolve(console.log('successfully fetched'));
                 }
-               
-                resolve(console.log('successfully deleted'));
             });
         }).then(()=>{
             //Send update notification
diff --git a/src/app/system-apps/filemanager/filemanager.component.css b/src/app/system-apps/filemanager/filemanager.component.css
index 1c5fa178..fbc956f5 100644
--- a/src/app/system-apps/filemanager/filemanager.component.css
+++ b/src/app/system-apps/filemanager/filemanager.component.css
@@ -134,3 +134,18 @@ span.tail{
     display:inline-flex;
     min-width: 18px;
 }
+
+
+.rename-textbox{
+    position: relative;
+    top: 1px;
+
+    max-width: 75px;
+    max-height: 16px;
+    border: 1px solid #333;
+    font-size: 12px;
+    z-index: 3;
+    overflow:hidden;
+    display: none;
+    text-align: center;
+ }
\ No newline at end of file
diff --git a/src/app/system-apps/filemanager/filemanager.component.html b/src/app/system-apps/filemanager/filemanager.component.html
index d725404b..6b8c5b0b 100644
--- a/src/app/system-apps/filemanager/filemanager.component.html
+++ b/src/app/system-apps/filemanager/filemanager.component.html
@@ -3,13 +3,18 @@
         <button fileMngrHighlight (dblclick)="runProcess(file)"  
         ngDraggable [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
         (stopped)="onDragEnd($event)" (started)="onDragStart($event)"
-        (contextmenu)="showIconContextMenu($event, file)" (click)="hideIconContextMenu()"
+        (contextmenu)="showIconContextMenu($event, file, i)" (click)="hideIconContextMenu()"
         id="iconBtn{{i}}"  [style]="btnStyle">
             <figure>
                 <img [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName"  [style]="iconSizeStyle"/>
-                <figcaption>
+                <figcaption  id="figCap{{i}}">
                         {{file.getFileName}}
                 </figcaption>
+                <div class="rename-textbox"  id="renameContainer{{i}}">
+                    <form [formGroup]="renameForm" (ngSubmit)="renameTheFile()"  id="renameTxtBox{{i}}">
+                        <input type="text" formControlName="renameInput" autofocus/>
+                    </form>
+                </div>
             </figure>
         </button>
     </li>
@@ -55,3 +60,17 @@
     <div class="empty-line-container"></div>
 </div>
 </ol>
+
+
+
+<!-- 
+<figcaption *ngIf="!isRenameMode, else elseBlock">
+    {{file.getFileName}}
+</figcaption>
+<ng-template #elseBlock>
+<div class="rename-textbox">
+    <form [formGroup]="renameForm" (ngSubmit)="renameTheFile()">
+      <input type="text" formControlName="renameInput" autofocus/>
+    </form>
+  </div>
+</ng-template> -->
\ No newline at end of file
diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
index 5c11e56c..a45ca5e7 100644
--- a/src/app/system-apps/filemanager/filemanager.component.ts
+++ b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -9,6 +9,7 @@ import { FileInfo } from 'src/app/system-files/fileinfo';
 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';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'cos-filemanager',
@@ -22,9 +23,10 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   
   private _processIdService:ProcessIDService;
   private _runningProcessService:RunningProcessService;
-  private _fileService:FileService
+  private _fileService:FileService;
   private _directoryFilesEntires!:FileEntry[];
   private _triggerProcessService:TriggerProcessService;
+  private _formBuilder;
 
   private _viewByNotifySub!:Subscription;
   private _sortByNotifySub!:Subscription;
@@ -53,12 +55,16 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   private showDesktopIcon = true;
 
   private selectedFile!:FileInfo;
+  renameForm!: FormGroup;
+  elementId = -1;
 
-  constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService, fileManagerService:FileManagerService) { 
+
+  constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService, fileManagerService:FileManagerService, formBuilder: FormBuilder,) { 
     this._processIdService = processIdService;
     this._runningProcessService = runningProcessService;
     this._fileService = fileInfoService;
     this._triggerProcessService = triggerProcessService;
+    this._formBuilder = formBuilder;
 
     this.processId = this._processIdService.getNewProcessId();
     this._runningProcessService.addProcess(this.getComponentDetail());
@@ -73,6 +79,11 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit():void{
+
+    this.renameForm = this._formBuilder.nonNullable.group({
+      renameInput: '',
+    });
+
     if(this.folderPath === '')
         this.directory = '/osdrive/desktop';
     else
@@ -146,7 +157,8 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   }
 
 
-  showIconContextMenu(evt:MouseEvent, file:FileInfo):void{
+  showIconContextMenu(evt:MouseEvent, file:FileInfo, id:number):void{
+    this.elementId = id;
     this._runningProcessService.responseToEventCount++;
     this.selectedFile = file;
 
@@ -285,7 +297,49 @@ export class FilemanagerComponent implements  OnInit, AfterViewInit, OnDestroy {
   }
 
   renameFile():void{
-1
+    const figCapElement= document.getElementById(`figCap${this.elementId}`) as HTMLElement;
+    const renameContainerElement= document.getElementById(`renameContainer${this.elementId}`) as HTMLElement;
+
+    if(figCapElement){
+      figCapElement.style.display = 'none';
+    }
+
+    if(renameContainerElement){
+      renameContainerElement.style.display = 'block';
+
+      this.renameForm.setValue({
+        renameInput:' '+ this.selectedFile.getFileName
+      })
+    }
+
+  }
+
+  renameTheFile():void{
+    console.log('I will change the File Name to this:', this.renameForm.value.renameInput);
+
+    const renameText = this.renameForm.value.renameInput as string
+
+    if( renameText === '' || renameText.trimStart().length == 0)
+      return;
+
+    this._fileService.renameFileAsync(this.selectedFile.getCurrentPath, renameText.trimStart());
+    
+    const btnElement = document.getElementById(`iconBtn${this.elementId}`) as HTMLElement;
+    const figCapElement= document.getElementById(`figCap${this.elementId}`) as HTMLElement;
+    const renameContainerElement= document.getElementById(`renameContainer${this.elementId}`) as HTMLElement;
+
+    if(btnElement){
+      btnElement.style.backgroundColor = 'hsl(206deg 77% 70%/20%)';
+      btnElement.style.border = '2px solid hsla(0,0%,50%,25%)'
+    }
+
+    if(figCapElement){
+      figCapElement.style.display = 'block';
+    }
+
+    if(renameContainerElement){
+      renameContainerElement.style.display = 'none';
+    }
   }