diff --git a/src/compilers/Memory.ts b/src/compilers/Memory.ts
index 03fac9a..091e29b 100644
--- a/src/compilers/Memory.ts
+++ b/src/compilers/Memory.ts
@@ -3,7 +3,7 @@ import { UI } from "../components/UI.js"
 export const Memory = {
 	cache: new Map<string, { namespace: string; elements: Map<string, UI<any>> }>(),
 
-	register_ui(path: string, element: UI<any>) {
+	register_ui(path: string, element: UI<any, any>) {
 		const { elements: saver, namespace } = this.get_file(path, element.namespace!)
 
 		if (saver.get(element.name!)) {
diff --git a/src/components/UI.ts b/src/components/UI.ts
index fc67e58..b073649 100644
--- a/src/components/UI.ts
+++ b/src/components/UI.ts
@@ -1,5 +1,6 @@
 import { FormatProperties } from "../compilers/FormatProperties.js"
 import { Memory } from "../compilers/Memory.js"
+import { Renderer } from "../types/enums/Renderer.js"
 import { Type } from "../types/enums/Type.js"
 import { Properties } from "../types/properties/components.js"
 import { Class } from "./Class.js"
@@ -7,15 +8,15 @@ import { RandomString } from "./Utils.js"
 
 import util from "node:util"
 
-export class UI<T extends Type> extends Class {
+export class UI<T extends Type, K extends Renderer | null = null> extends Class {
 	private path: string
 
 	name: string
 	namespace: string
-	extend?: UI<Type>
+	extend?: UI<Type, Renderer | null>
 
-	controls = new Map<string, [UI<Type>, Properties<Type>]>()
-	properties: Properties<T> = <any>{}
+	controls = new Map<string, [UI<Type, Renderer | null>, Properties<Type, Renderer | null>]>()
+	properties: Properties<T, K> = <any>{}
 
 	constructor(public type?: T, name?: string, namespace?: string, path?: string) {
 		super()
@@ -29,12 +30,12 @@ export class UI<T extends Type> extends Class {
 		Memory.register_ui(this.path, this)
 	}
 
-	setProperties(properties: Properties<T>) {
+	setProperties(properties: Properties<T, K>) {
 		this.properties = properties
 		return this
 	}
 
-	addChild<T extends Type>(child: UI<T>, properties?: Properties<T>, name?: string) {
+	addChild<T extends Type, K extends Renderer | null>(child: UI<T, K>, properties?: Properties<T, K>, name?: string) {
 		if (this === <any>child) {
 			throw new Error("Cannot add a child to itself")
 		}
diff --git a/src/components/Utils.ts b/src/components/Utils.ts
index 4c0bc5e..4767783 100644
--- a/src/components/Utils.ts
+++ b/src/components/Utils.ts
@@ -4,7 +4,6 @@ import { UI } from "./UI.js"
 
 import { Renderer } from "../types/enums/Renderer.js"
 import {
-	RendererProperties,
 	Properties,
 	CollectionPanel,
 	Custom,
@@ -111,11 +110,13 @@ export function Label(properties?: Label, name?: string, namespace?: string) {
 
 export function Custom<R extends Renderer>(
 	renderer: R,
-	properties?: Custom | RendererProperties<R>,
+	properties?: Properties<Type.CUSTOM, R>,
 	name?: string,
 	namespace?: string
 ) {
-	return new UI(Type.CUSTOM, name, namespace).setProperties({ renderer, ...properties })
+	const custom = new UI<Type.CUSTOM, R>(Type.CUSTOM, name, namespace)
+	if (properties) custom.setProperties({ renderer, ...properties })
+	return custom
 }
 
 export function TooltipTrigger(properties?: TooltipTrigger, name?: string, namespace?: string) {
@@ -162,8 +163,14 @@ export function SliderBox(properties?: SliderBox, name?: string, namespace?: str
 	return new UI(Type.SLIDER_BOX, name, namespace).setProperties(properties || {})
 }
 
-export function Extends<T extends Type>(element: UI<T>, properties?: Properties<T>, name?: string, namespace?: string) {
-	const ui = new UI(undefined, name, namespace).setProperties(properties || {})
+export function Extends<T extends Type, K extends Renderer | null>(
+	element: UI<T, K>,
+	properties?: Properties<T, K>,
+	name?: string,
+	namespace?: string
+) {
+	const ui = new UI<T, K>(undefined, name, namespace)
+	if (properties) ui.setProperties(properties)
 	ui.extend = element
 	return ui as typeof element
 }
diff --git a/src/types/properties/components.ts b/src/types/properties/components.ts
index 445f4ad..e71489c 100644
--- a/src/types/properties/components.ts
+++ b/src/types/properties/components.ts
@@ -53,8 +53,6 @@ export interface ComponenetsProperties {
 	[Type.SLIDER_BOX]: SliderBox
 }
 
-export type Properties<T> = T extends keyof ComponenetsProperties ? Partial<ComponenetsProperties[T]> : {}
-
 export interface CustomRendererProperties {
 	[Renderer.PAPER_DOLL_RENDERER]: e.PaperDollRenderer
 	[Renderer.NETEASE_PAPER_DOLL_RENDERER]: e.NeteasePaperDollRenderer
@@ -67,4 +65,7 @@ export interface CustomRendererProperties {
 	[Renderer.EQUIPMENT_PREVIEW_RENDERER]: e.EquipmentPreviewRenderer
 }
 
-export type RendererProperties<T> = T extends keyof CustomRendererProperties ? Partial<CustomRendererProperties[T]> : {}
+export type Properties<T extends Type, K extends Renderer | null = null> = (T extends keyof ComponenetsProperties
+	? Partial<ComponenetsProperties[T]>
+	: {}) &
+	(K extends keyof CustomRendererProperties ? Partial<CustomRendererProperties[K]> : {})
diff --git a/test/app.ts b/test/app.ts
index 5b2b4fd..382760e 100644
--- a/test/app.ts
+++ b/test/app.ts
@@ -1,6 +1,6 @@
-import { Anchor, Custom, Extends, GlobalVariables, Panel, Renderer, Type, UI } from ".."
+import { Anchor, Button, Custom, Extends, GlobalVariables, Panel, Renderer, Type, UI } from ".."
 
-const paperDoll = Custom(Renderer.PAPER_DOLL_RENDERER, {
+const paperDoll = Custom(Renderer.ANIMATED_GIF_RENDERER, {
 	camera_tilt_degrees: 360,
 	starting_rotation: 0,
 })
@@ -8,4 +8,14 @@ const paperDoll = Custom(Renderer.PAPER_DOLL_RENDERER, {
 const panel = Panel({
 	anchor: Anchor.BOTTOM_LEFT,
 	offset: [50, 50],
+}).setProperties({
+	camera_tilt_degrees: 360,
+})
+
+paperDoll.setProperties({
+	camera_tilt_degrees: 360,
+})
+
+panel.setProperties({
+	hover_control: "cac",
 })