diff --git a/app/components/H4.tsx b/app/components/H4.tsx
new file mode 100644
index 0000000000..bfbf79d630
--- /dev/null
+++ b/app/components/H4.tsx
@@ -0,0 +1,19 @@
+import { twMerge } from "tailwind-merge"
+
+export const H4 = ({
+  className,
+  children,
+}:{
+  className?: string,
+  children: React.ReactNode,
+})=>{
+  return(
+    <h4
+      className={
+        twMerge("text-base font-medium text-white", className)
+      }
+    >
+      {children}
+    </h4>
+  )
+}
\ No newline at end of file
diff --git a/app/components/ItemPicker.tsx b/app/components/ItemPicker.tsx
new file mode 100644
index 0000000000..90eae68411
--- /dev/null
+++ b/app/components/ItemPicker.tsx
@@ -0,0 +1,17 @@
+import { H4 } from ".";
+
+interface ItemPickerProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  label: string
+}
+
+export const ItemPicker = ({
+  label,
+  ...imgProps
+}:ItemPickerProps) => {
+  return (
+    <div className="relative border border-ui-border rounded-lg overflow-hidden">
+      <img className="aspect-square min-w-20" {...imgProps} />
+      <H4 className="absolute bottom-0 left-2 drop-shadow-md">{label}</H4>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
new file mode 100644
index 0000000000..f9ca528ab9
--- /dev/null
+++ b/app/components/Textarea.tsx
@@ -0,0 +1,17 @@
+import { TextareaHTMLAttributes } from "react"
+import { twMerge } from "tailwind-merge";
+
+export const Textarea = ({
+  className,
+  ...rest
+}:TextareaHTMLAttributes<HTMLTextAreaElement>) => {
+  return(
+    <textarea
+      {...rest}
+      className={twMerge(
+        "rounded-lg bg-ui-controls border border-ui-panel-border py-2 px-4"
+        ,className
+      )}
+    />
+  );
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 10671425e4..48db37a00c 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -3,4 +3,9 @@ import { ButtonIcon } from "./ButtonIcon";
 import { ButtonLink } from "./ButtonLink";
 import { ButtonIconSelect } from "./ButtonIconSelect";
 
-export { Button, ButtonIcon, ButtonLink, ButtonIconSelect };
+import {H4} from "./H4";
+
+import { ItemPicker } from "./ItemPicker";
+import { Textarea } from "./Textarea";
+
+export { Button, ButtonIcon, ButtonLink, ButtonIconSelect, H4, ItemPicker, Textarea};
diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx
index 203b233e3f..57ec64a81d 100644
--- a/app/modules/SidePanel/SidePanel.tsx
+++ b/app/modules/SidePanel/SidePanel.tsx
@@ -7,7 +7,11 @@ import {
   faChevronRight,
 } from "@fortawesome/pro-solid-svg-icons";
 
-export const SidePanel = () => {
+interface Props {
+  children: React.ReactNode;
+}
+
+export const SidePanel = ({children}:Props) => {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
@@ -27,27 +31,11 @@ export const SidePanel = () => {
         leaveFrom="translate-x-0"
         leaveTo="translate-x-full"
       >
-        <Tabs
-          tabs={[
-            {
-              header: "Animation",
-              children: <p>Animation Tab</p>,
-            },
-            {
-              header: "Camera",
-              children: <p>Camera Tab</p>,
-            },
-            {
-              header: "Audio",
-              children: <p>Audio Tab</p>,
-            },
-            {
-              header: "Styling",
-              children: <p>Styling Tab</p>,
-            },
-          ]}
-        />
+
+          {children}
+
       </Transition>
     </div>
+
   );
 };
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 245de92a2b..af96c8ef96 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -6,13 +6,14 @@ import { Button, ButtonLink } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
-import { Tabs } from "~/modules/Tabs";
+
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsVideo } from "./comps/ControlsVideo";
 import { Timeline } from "./comps/Timeline";
+import { SidePanelTabs } from "./comps/SidePanelTabs";
 
 import Editor from "./js/editor";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+
 import { TrackProvider } from "~/contexts/TrackContext/TrackProvider";
 
 export const PageEnigma = () => {
@@ -124,13 +125,15 @@ export const PageEnigma = () => {
           </div>
 
           {/* Side panel */}
-          <SidePanel />
+          <SidePanel>
+            <SidePanelTabs />
+          </SidePanel>
         </div>
 
         {/* Timeline */}
         <div className="min-h-[260px]" ref={timelineRef}>
           <TrackProvider>
-            <Timeline editorCurrent={editorRef.current} length={12} />
+            <Timeline editorCurrent={editorRef.current} />
           </TrackProvider>
         </div>
       </div>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
new file mode 100644
index 0000000000..8e124041cf
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx
@@ -0,0 +1,53 @@
+
+import {
+  H4,
+  ItemPicker,
+  Textarea
+} from "~/components"
+
+
+export const TabStyling = ()=>{
+  const handlePickingStyle = (picked:string)=>{
+    console.log(`Picked style: ${picked}`);
+  }
+
+  return(
+    <>
+      <H4>Select Base Style</H4>
+      <div className="flex gap-2 my-2">
+        <ItemPicker
+          label="Anime"
+          onClick={()=>handlePickingStyle("anime")}
+          src="/resources/avatars/0.webp"
+        />
+        <ItemPicker
+          label="Pixel"
+          onClick={()=>handlePickingStyle("pixel")}
+          src="/resources/avatars/1.webp"
+        />
+        <ItemPicker
+          label="Pixar"
+          onClick={()=>handlePickingStyle("pixar")}
+          src="/resources/avatars/2.webp"
+        />
+        <ItemPicker
+          label="Stylized"
+          onClick={()=>handlePickingStyle("stylized")}
+          src="/resources/avatars/3.webp"
+        />
+      </div>
+      <H4>Enter a Prompt</H4>
+      <div className="flex gap-2 my-2">
+        <Textarea className="w-full" />
+      </div>
+      <H4>Negative Prompt</H4>
+      <div className="flex gap-2 my-2">
+        <Textarea
+          className="w-full"
+          placeholder="Type here to filter out the things you don't want in the scene
+        "/>
+      </div>
+    </>
+  );
+
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
new file mode 100644
index 0000000000..38929885a1
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
@@ -0,0 +1,28 @@
+import { Tabs } from "~/modules/Tabs";
+import { TabStyling } from "./TabStyling";
+
+export const SidePanelTabs = ()=>{
+  return(
+    <Tabs
+      tabs={[
+        {
+          header: "Animation",
+          children: <p>Animation Tab</p>,
+        },
+        {
+          header: "Camera",
+          children: <p>Camera Tab</p>,
+        },
+        {
+          header: "Audio",
+          children: <p>Audio Tab</p>,
+        },
+        {
+          header: "Styling",
+          children: <TabStyling />,
+        },
+      ]}
+    />
+  );
+
+}
\ No newline at end of file
diff --git a/public/resources/avatars/0.webp b/public/resources/avatars/0.webp
new file mode 100644
index 0000000000..f95afe03b2
Binary files /dev/null and b/public/resources/avatars/0.webp differ
diff --git a/public/resources/avatars/1.webp b/public/resources/avatars/1.webp
new file mode 100644
index 0000000000..6acf0da539
Binary files /dev/null and b/public/resources/avatars/1.webp differ
diff --git a/public/resources/avatars/10.webp b/public/resources/avatars/10.webp
new file mode 100644
index 0000000000..f6fd4df884
Binary files /dev/null and b/public/resources/avatars/10.webp differ
diff --git a/public/resources/avatars/11.webp b/public/resources/avatars/11.webp
new file mode 100644
index 0000000000..c14bcebda5
Binary files /dev/null and b/public/resources/avatars/11.webp differ
diff --git a/public/resources/avatars/12.webp b/public/resources/avatars/12.webp
new file mode 100644
index 0000000000..0078476c03
Binary files /dev/null and b/public/resources/avatars/12.webp differ
diff --git a/public/resources/avatars/13.webp b/public/resources/avatars/13.webp
new file mode 100644
index 0000000000..e8b1635f36
Binary files /dev/null and b/public/resources/avatars/13.webp differ
diff --git a/public/resources/avatars/14.webp b/public/resources/avatars/14.webp
new file mode 100644
index 0000000000..fd532381f9
Binary files /dev/null and b/public/resources/avatars/14.webp differ
diff --git a/public/resources/avatars/15.webp b/public/resources/avatars/15.webp
new file mode 100644
index 0000000000..c61aea6d96
Binary files /dev/null and b/public/resources/avatars/15.webp differ
diff --git a/public/resources/avatars/16.webp b/public/resources/avatars/16.webp
new file mode 100644
index 0000000000..f112d25df5
Binary files /dev/null and b/public/resources/avatars/16.webp differ
diff --git a/public/resources/avatars/17.webp b/public/resources/avatars/17.webp
new file mode 100644
index 0000000000..f7ab766002
Binary files /dev/null and b/public/resources/avatars/17.webp differ
diff --git a/public/resources/avatars/18.webp b/public/resources/avatars/18.webp
new file mode 100644
index 0000000000..fa3fc2f0ac
Binary files /dev/null and b/public/resources/avatars/18.webp differ
diff --git a/public/resources/avatars/19.webp b/public/resources/avatars/19.webp
new file mode 100644
index 0000000000..0207cd889e
Binary files /dev/null and b/public/resources/avatars/19.webp differ
diff --git a/public/resources/avatars/2.webp b/public/resources/avatars/2.webp
new file mode 100644
index 0000000000..03777b780f
Binary files /dev/null and b/public/resources/avatars/2.webp differ
diff --git a/public/resources/avatars/20.webp b/public/resources/avatars/20.webp
new file mode 100644
index 0000000000..367f411541
Binary files /dev/null and b/public/resources/avatars/20.webp differ
diff --git a/public/resources/avatars/21.webp b/public/resources/avatars/21.webp
new file mode 100644
index 0000000000..e6eeb4d155
Binary files /dev/null and b/public/resources/avatars/21.webp differ
diff --git a/public/resources/avatars/22.webp b/public/resources/avatars/22.webp
new file mode 100644
index 0000000000..f8c0ffca87
Binary files /dev/null and b/public/resources/avatars/22.webp differ
diff --git a/public/resources/avatars/23.webp b/public/resources/avatars/23.webp
new file mode 100644
index 0000000000..15137375b5
Binary files /dev/null and b/public/resources/avatars/23.webp differ
diff --git a/public/resources/avatars/24.webp b/public/resources/avatars/24.webp
new file mode 100644
index 0000000000..4e925a9e35
Binary files /dev/null and b/public/resources/avatars/24.webp differ
diff --git a/public/resources/avatars/3.webp b/public/resources/avatars/3.webp
new file mode 100644
index 0000000000..ccb44b0afc
Binary files /dev/null and b/public/resources/avatars/3.webp differ
diff --git a/public/resources/avatars/4.webp b/public/resources/avatars/4.webp
new file mode 100644
index 0000000000..421877e2e4
Binary files /dev/null and b/public/resources/avatars/4.webp differ
diff --git a/public/resources/avatars/5.webp b/public/resources/avatars/5.webp
new file mode 100644
index 0000000000..2b4db489a0
Binary files /dev/null and b/public/resources/avatars/5.webp differ
diff --git a/public/resources/avatars/6.webp b/public/resources/avatars/6.webp
new file mode 100644
index 0000000000..dc8e5a2d96
Binary files /dev/null and b/public/resources/avatars/6.webp differ
diff --git a/public/resources/avatars/7.webp b/public/resources/avatars/7.webp
new file mode 100644
index 0000000000..d711281f67
Binary files /dev/null and b/public/resources/avatars/7.webp differ
diff --git a/public/resources/avatars/8.webp b/public/resources/avatars/8.webp
new file mode 100644
index 0000000000..a71c77e64a
Binary files /dev/null and b/public/resources/avatars/8.webp differ
diff --git a/public/resources/avatars/9.webp b/public/resources/avatars/9.webp
new file mode 100644
index 0000000000..bf72a412ce
Binary files /dev/null and b/public/resources/avatars/9.webp differ