diff --git a/src/app/App.js b/src/app/App.js
index cb793c9..d17bdfc 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,6 +1,7 @@
 import { iconButton } from '../components/iconButton';
 import { buttonPlay } from '../components/buttonPlay/buttonPlay.js';
 import { gameNavigation } from '../components/gameNavigation/gameNavigation.js';
+import {createLightSaber} from '../components/lightSaber/lightSaber.js';
 
 export const App = ({ options }) => {
   gameNavigation();
diff --git a/src/components/lightSaber/img/Lightsaber.png b/src/components/lightSaber/img/Lightsaber.png
new file mode 100644
index 0000000..ca8b090
Binary files /dev/null and b/src/components/lightSaber/img/Lightsaber.png differ
diff --git a/src/components/lightSaber/lightSaber.js b/src/components/lightSaber/lightSaber.js
new file mode 100644
index 0000000..2cba484
--- /dev/null
+++ b/src/components/lightSaber/lightSaber.js
@@ -0,0 +1,35 @@
+export const createLightSaber=()=>{
+    const component= document.createElement('div');
+    const handle=document.createElement('div');
+    const processBar=document.createElement('div');
+    const lightprocessBar=document.createElement('div');
+    component.className="lightBar";
+    handle.style.backgroundImage=`url(img/Lightsaber.png)`;
+    handle.className="lightSaberHandle";
+    processBar.className="lightSaberProcessBar";
+    lightprocessBar.className="LightProcessBar";
+    component.appendChild(handle);
+    component.appendChild(processBar);
+    processBar.appendChild(lightprocessBar);
+    var soundOnEl = document.getElementById('soundOn');
+
+    window.onload = countingFunction=()=>{
+        
+        const time=120;
+        let fullwidth=1480;
+        setInterval(c,1000/8);
+        function c(){
+            fullwidth -=1480/(time*8);
+            lightprocessBar.style.width=`${fullwidth}px`;
+            if(fullwidth<0){
+                clearInterval(c);
+            }
+        }
+     
+    };
+    return component;
+}
+
+
+
+
diff --git a/src/components/lightSaber/lightSaber.scss b/src/components/lightSaber/lightSaber.scss
new file mode 100644
index 0000000..2670ee0
--- /dev/null
+++ b/src/components/lightSaber/lightSaber.scss
@@ -0,0 +1,47 @@
+body{
+    
+}
+
+.lightSaberHandle{
+    
+position:absolute;
+width: 315px;
+height: 65px;
+left: 0px;
+top: 0px;
+background-repeat: no-repeat;
+background-position: center;
+    
+
+}
+.lightBar{
+    position: absolute;
+    width: 1480px;
+    height: 65px;
+    left: 0px;
+     top: 0px;
+    display:flex;
+    flex-direction: column;
+    
+    
+}
+
+.lightSaberProcessBar{
+position: absolute;
+width: 1480px;
+height: 24px;
+left: 278px;
+top: 21px;
+background-color:  #BCBCBC;
+box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+border-radius: 8px;
+}
+
+.LightProcessBar{
+position: absolute;
+width: 1480px;
+height: 100%;
+background: #FFFFFF;
+box-shadow: 10px -5px 15px #FF0000, 10px 5px 15px #FF0000, inset 0px 5px 4px rgba(255, 0, 0, 0.25);
+border-radius: 8px;
+}