diff --git a/css/styles.css b/css/styles.css
index 24add02..ecb8ce0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -20,6 +20,26 @@ html, button {
 	cursor: url(../icons/ArrowSmall.cur), default;
 }
 
+/*login or signin*/
+.login{
+	display:flex;
+	flex-direction:column;
+	align-items:center;
+	justify-content:flex-end;
+}
+.login p{
+	font-size: 16px;
+	font-weight: 500;
+    color:gray
+}
+
+.userLogin{
+	display:flex;
+	flex-direction:row;
+	justify-content: center;
+	background-color: #eeeeee;
+}
+
 /* sugar-vue-Icon */
 .test {
     width:80px;
diff --git a/icons/login.svg b/icons/login.svg
new file mode 100644
index 0000000..dee459c
--- /dev/null
+++ b/icons/login.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="55pt" height="55pt" version="1.1" viewBox="0 0 55 55" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="login.svg">
+  <metadata id="metadata10">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs8"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1069" inkscape:window-height="704" id="namedview6" showgrid="false" inkscape:zoom="7.3018182" inkscape:cx="6.7791335" inkscape:cy="34.375" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="svg2"/>
+  <path d="m 22.625984,22.432363 c -1.59412,-3.68456 -5.28088,-6.2689 -9.5689,-6.2689 -5.7211001,0 -10.3961001,4.675 -10.3961001,10.3939 0,5.775 4.675,10.3939 10.3939001,10.3939 4.23456,0 7.80945,-2.53088 9.45945,-6.1061 l 3.90588,0 3.90588,-2.75 3.90588,2.75 1.15588,0 3.90588,-2.75 3.90588,2.75 4.73088,0 4.18088,-4.23456 -4.18088,-4.23456 -25.3044,0.0022 z m -12.8711,6.6 c -1.31912,0 -2.3654401,-1.04412 -2.3654401,-2.36544 0,-1.31912 1.0441201,-2.36544 2.3654401,-2.36544 1.31912,0 2.36544,1.04412 2.36544,2.36544 0.05586,1.321265 -1.04412,2.36544 -2.36544,2.36544 z m 37.1811,-4.34412 -23.65,0 c -0.05586,-0.165429 -0.05586,-0.384571 -0.109571,-0.55 l 23.75945,0 z" id="path4" inkscape:connector-curvature="0" style="fill:#808080"/>
+</svg>
\ No newline at end of file
diff --git a/icons/newuser-icon.svg b/icons/newuser-icon.svg
new file mode 100644
index 0000000..4dd2d02
--- /dev/null
+++ b/icons/newuser-icon.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100.00205" height="100.00359" id="svg6314" sodipodi:version="0.32" inkscape:version="0.91 r13725" sodipodi:modified="true" version="1.0" sodipodi:docname="newuser-icon.svg">
+  <defs id="defs6316"/>
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="3.4883934" inkscape:cx="46.338316" inkscape:cy="43.939733" inkscape:document-units="px" inkscape:current-layer="layer1" width="240px" height="330px" showgrid="true" showguides="true" inkscape:guide-bbox="true" inkscape:window-width="1440" inkscape:window-height="796" inkscape:window-x="0" inkscape:window-y="0" fit-margin-top="2" fit-margin-left="15" fit-margin-right="15" fit-margin-bottom="1.05" inkscape:window-maximized="1"/>
+  <metadata id="metadata6319">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g inkscape:label="Camada 1" inkscape:groupmode="layer" id="layer1" transform="translate(-70.329532,-115.26482)">
+    <g id="g6359" transform="matrix(0.30369126,0,0,0.30369187,50.048643,57.867202)" style="fill:#ffffff;stroke:#808080">
+      <path transform="matrix(0.969697,0,0,0.969697,-90.879133,125.06999)" d="M 382.60403,134.2677 A 51.220825,51.220825 0 0 1 331.38321,185.48853 51.220825,51.220825 0 0 1 280.16238,134.2677 51.220825,51.220825 0 0 1 331.38321,83.046875 51.220825,51.220825 0 0 1 382.60403,134.2677 Z" sodipodi:ry="51.220825" sodipodi:rx="51.220825" sodipodi:cy="134.2677" sodipodi:cx="331.38321" id="path2307" style="fill:#ffffff;stroke:#808080;stroke-width:20.62502098;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" sodipodi:type="arc"/>
+      <path sodipodi:nodetypes="ccccccccccccc" id="path5343" d="m 290.55846,302.47333 -58.81513,59.20058 -59.39461,-59.40024 c -25.19828,-24.48771 -62.7038,13.33148 -38.1941,37.98719 l 60.04451,58.9817 -59.73639,59.42563 c -24.83976,24.97559 12.91592,63.26505 37.66786,37.75282 l 59.95799,-59.28294 58.75912,59.21065 c 24.50656,25.09065 62.43116,-13.00322 37.87956,-37.85772 l -59.24184,-59.02842 58.87574,-59.14782 c 25.1689,-25.18348 -13.0489,-62.75154 -37.80271,-37.84143 z" style="fill:#ffffff;stroke:#808080;stroke-width:20.00002098;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" inkscape:connector-curvature="0"/>
+    </g>
+    <text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" x="161.21425" y="170.70395" id="text2987" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan2989" x="161.21425" y="170.70395"/></text>
+    <path inkscape:connector-curvature="0" style="fill:#ffffff;fill-opacity:1;stroke:#808080;stroke-width:1.74102712;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect3894" d="m 153.19395,185.55736 c -1.12058,0 -2.04026,0.91968 -2.04026,2.04026 l 0,4.679 -3.31883,-3.31883 c -0.79321,-0.79152 -2.06484,-0.7932 -2.85636,0 -0.79153,0.79322 -0.79318,2.09205 0,2.88357 l 3.34602,3.31883 -4.7334,0 c -1.12058,0 -2.04026,0.91968 -2.04026,2.04026 0,1.12058 0.91968,2.01306 2.04026,2.01306 l 4.7062,0 -3.31882,3.31882 c -0.79152,0.79321 -0.79318,2.09205 0,2.88357 0.79321,0.79152 2.09204,0.76601 2.88357,-0.0272 l 3.29162,-3.31882 0,4.7334 c 0,1.12058 0.91968,2.01306 2.04026,2.01306 1.12058,0 2.01306,-0.89248 2.01306,-2.01306 l 0,-4.76061 3.37323,3.34603 c 0.79321,0.79152 2.06484,0.79321 2.85636,0 0.79152,-0.79321 0.79322,-2.06484 0,-2.85636 l -3.34603,-3.31883 4.70621,0 c 1.12057,0 2.01305,-0.89248 2.01305,-2.01306 0,-1.12058 -0.89248,-2.04026 -2.01305,-2.04026 l -4.73341,0 3.34603,-3.37323 c 0.79152,-0.79321 0.79321,-2.03764 0,-2.82916 -0.79322,-0.79152 -2.06484,-0.82042 -2.85637,-0.0272 l -3.34602,3.37323 0,-4.7062 c 0,-1.12058 -0.89248,-2.04026 -2.01306,-2.04026 z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index fe6cc86..9cd7c39 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,29 @@
 
   <body id="body">
 	<div id="app">
+
+		<div class="userLogin">
+			<login ref="login"
+			id="1"
+			svgfile="icons/newuser-icon.svg" 
+			color="8"
+			size="60"
+			x="-2"
+			is-native="true"
+			content="New User"
+		   ></login>
+
+			<login ref="login"
+			id="1"
+			svgfile="icons/login.svg" 
+			color="8"
+			size="60"
+			x="-2"
+			is-native="true"
+			content="login"
+		   ></login>
+		</div>
+		
 		<h2>Hello Sugarizer</h2>
 		<h3>{{ message }}</h3>
 		<icon-button ref="settings1"
@@ -158,7 +181,7 @@ <h3>{{ message }}</h3>
 			
 		<icon ref="icon1"
 			id="1"
-			svgfile="icons/old-owner.svg" 
+			svgfile="icons/owner-icon.svg" 
 			color="8"
 			size="60"
 			x="-2"
@@ -229,6 +252,11 @@ <h3>{{ message }}</h3>
 				Product Name : {{product.name}} - Price : {{product.price}} ({{product.category}})
 			</li>
 		</ul>
+
+	
+		
+        
+		
 	</div>
 
 	<script src="js/icon.js"></script>
@@ -239,6 +267,8 @@ <h3>{{ message }}</h3>
 	<script src="js/filterbox.js"></script>
 	<script src="js/password.js"></script>
 	<script src="js/dialog.js"></script>
+	<script src="js/login.js"></script>
 	<script src="js/app.js"></script>
+	<script src="js/dummy.js"></script>
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
index 85d72dd..62631f6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -15,7 +15,8 @@ const app = Vue.createApp({
 		"select-box": SelectBox,
 		"filter-box": FilterBox,
 		"password": Password,
-		"dialog-box": Dialog
+		"dialog-box": Dialog,
+		"login": Login,
 	},
 	data() {
 		return {
diff --git a/js/login.js b/js/login.js
new file mode 100644
index 0000000..c2683f9
--- /dev/null
+++ b/js/login.js
@@ -0,0 +1,24 @@
+
+/**
+ * @module Login
+ * @desc This is an icon component for both native and simple SVG icons
+ * @vue-prop {String} svgfile - Url of svg file
+ * @vue-prop {String} content - whether we are using it for login or signup
+*/
+const Login ={
+	name: 'Login',
+	template: `<div class="login" ref="login">
+	          <img :src="svgfile" alt="login" class="login-image">
+			 <p class="login-text">{{contentData}}</p>
+	</div>`,
+	props: ['svgfile','color','size','content'],
+	data() {
+		return {
+			contentData: this.content,
+			svgfile: this.svgfile,
+		}
+	},
+	
+};
+
+if (typeof module !== 'undefined') module.exports = { Login }
\ No newline at end of file