diff --git a/projects/angular-upcrop/src/lib/angular-upcrop.module.ts b/projects/angular-upcrop/src/lib/angular-upcrop.module.ts
index d0fd744..7931d19 100644
--- a/projects/angular-upcrop/src/lib/angular-upcrop.module.ts
+++ b/projects/angular-upcrop/src/lib/angular-upcrop.module.ts
@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { AngularUpcropComponent } from './angular-upcrop.component';
+import { UpcropComponent } from './upcrop/upcrop.component';
 
 @NgModule({
-  imports: [
-  ],
-  declarations: [AngularUpcropComponent],
-  exports: [AngularUpcropComponent]
+    imports: [
+    ],
+    declarations: [UpcropComponent],
+    exports: [UpcropComponent]
 })
 export class AngularUpcropModule { }
diff --git a/projects/angular-upcrop/src/lib/upcrop/upcrop.component.css b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/angular-upcrop/src/lib/upcrop/upcrop.component.html b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.html
new file mode 100644
index 0000000..bde998c
--- /dev/null
+++ b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.html
@@ -0,0 +1,3 @@
+<p>
+  upcrop works!
+</p>
diff --git a/projects/angular-upcrop/src/lib/angular-upcrop.component.spec.ts b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.spec.ts
similarity index 52%
rename from projects/angular-upcrop/src/lib/angular-upcrop.component.spec.ts
rename to projects/angular-upcrop/src/lib/upcrop/upcrop.component.spec.ts
index 5b600a8..b31bd62 100644
--- a/projects/angular-upcrop/src/lib/angular-upcrop.component.spec.ts
+++ b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AngularUpcropComponent } from './angular-upcrop.component';
+import { UpcropComponent } from './upcrop.component';
 
-describe('AngularUpcropComponent', () => {
-  let component: AngularUpcropComponent;
-  let fixture: ComponentFixture<AngularUpcropComponent>;
+describe('UpcropComponent', () => {
+  let component: UpcropComponent;
+  let fixture: ComponentFixture<UpcropComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AngularUpcropComponent ]
+      declarations: [ UpcropComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AngularUpcropComponent);
+    fixture = TestBed.createComponent(UpcropComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/projects/angular-upcrop/src/lib/angular-upcrop.component.ts b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.ts
similarity index 52%
rename from projects/angular-upcrop/src/lib/angular-upcrop.component.ts
rename to projects/angular-upcrop/src/lib/upcrop/upcrop.component.ts
index 4c6e445..b1ada15 100644
--- a/projects/angular-upcrop/src/lib/angular-upcrop.component.ts
+++ b/projects/angular-upcrop/src/lib/upcrop/upcrop.component.ts
@@ -2,14 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
     selector: 'angular-upcrop',
-    template: `
-    <p>
-      angular-upcrop works!
-    </p>
-  `,
-    styles: []
+    templateUrl: './upcrop.component.html',
+    styleUrls: ['./upcrop.component.css']
 })
-export class AngularUpcropComponent implements OnInit {
+export class UpcropComponent implements OnInit {
 
     constructor() { }
 
diff --git a/projects/angular-upcrop/src/public_api.ts b/projects/angular-upcrop/src/public_api.ts
index cb72302..a492207 100644
--- a/projects/angular-upcrop/src/public_api.ts
+++ b/projects/angular-upcrop/src/public_api.ts
@@ -3,5 +3,5 @@
  */
 
 export * from './lib/angular-upcrop.service';
-export * from './lib/angular-upcrop.component';
+export * from './lib/upcrop/upcrop.component';
 export * from './lib/angular-upcrop.module';