diff --git a/packages/nextjs/app/createComission/page.tsx b/packages/nextjs/app/createComission/page.tsx
new file mode 100644
index 0000000..6c07dab
--- /dev/null
+++ b/packages/nextjs/app/createComission/page.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import type { NextPage } from "next";
+import { useAccount } from "@starknet-react/core";
+import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
+import { SetStateAction, useState } from "react"
+import { Button } from "~~/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card"
+import { Input } from "~~/components/ui/input"
+import { Label } from "~~/components/ui/label"
+import { Textarea } from "~~/components/ui/textarea"
+import { Select, SelectItem } from "~~/components/ui/select2"
+import { DollarSign, Target, Users } from "lucide-react";
+
+const createComission: NextPage = () => {
+  const { address: connectedAddress, isConnected, isConnecting } = useAccount();
+
+  const [fundingGoal, setFundingGoal] = useState(10000)
+  const [duration, setDuration] = useState(30)
+
+  // Mock user's IP data
+  const userIPs = [
+    { id: "ip1", name: "AI-Powered Neural Interface" },
+    { id: "ip2", "name": "Quantum Encryption Algorithm" },
+    { id: "ip3", "name": "Sustainable Energy Converter" },
+  ]
+  return (
+    <>
+      
+      
+      
+      <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+
+
+
+        {!isConnected || isConnecting ? (
+          <CustomConnectButton />
+        ) : (
+         
+
+      <div className="max-w-10xl mx-auto">   
+
+      <h1 className="text-3xl font-bold mb-6">Commission Intellectual Property</h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      
+      
+      <Card className="bg-base-100">
+        <CardHeader>
+          <CardTitle>Commission IP from a Freelancer</CardTitle>
+          <CardDescription>Describe the intellectual property you need created</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="grid gap-6">
+              <div>
+                <Label htmlFor="project-name">Project Name</Label>
+                <Input id="project-name" placeholder="Enter a name for your project" className="w-full rounded input input-bordered bg-base-300" />
+              </div>
+              <div>
+                <Label htmlFor="ip-type">IP Type</Label>
+                <Select id="ip-type" className="w-full rounded input input-bordered bg-base-300">
+                  <SelectItem value="software">Software</SelectItem>
+                  <SelectItem value="design">Graphic Design</SelectItem>
+                  <SelectItem value="writing">Writing</SelectItem>
+                  <SelectItem value="music">Music</SelectItem>
+                  <SelectItem value="invention">Invention</SelectItem>
+                </Select>
+              </div>
+              <div>
+                <Label htmlFor="description">Project Description</Label>
+                <Textarea id="description" placeholder="Describe the intellectual property you need created" className="w-full rounded input input-bordered bg-base-300" />
+              </div>
+              <div>
+                <Label htmlFor="budget">Budget ($)</Label>
+                <Input id="budget" type="number" placeholder="Enter your budget for this project" className="w-full rounded input input-bordered bg-base-300" />
+              </div>
+              <div>
+                <Label htmlFor="deadline">Deadline</Label>
+                <Input id="deadline" type="date" className="w-full rounded input input-bordered bg-base-300" />
+              </div>
+              <div>
+                <Label htmlFor="requirements">Special Requirements</Label>
+                <Textarea id="requirements" placeholder="Any specific requirements or skills needed" className="w-full rounded input input-bordered bg-base-300" />
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <Button>Post Project</Button>
+        </CardFooter>
+      </Card>
+
+      <div className="mt-8 grid md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Campaign Benefits</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-4">
+              <DollarSign className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Publish</h3>
+                <p className="text-sm text-muted-foreground">Order your intellectual property on our marketplace.</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Users className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Secure</h3>
+                <p className="text-sm text-muted-foreground">Your order is executed through smart contracts.</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Target className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Licensing</h3>
+                <p className="text-sm text-muted-foreground">All information is recorded on the blockchain.</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>How It Works</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ol className="list-decimal list-inside space-y-2">
+              <li>Create your campaign with details about your IP</li>
+              <li>Set your budget and extra details</li>
+              <li>Publish your order</li>
+              <li>Stay tuned for app updates and notifications.</li>
+              <li>Analise prospect proposals</li>
+              <li>Aprove the comission</li>
+              <li>Receive your digital asset</li>
+            </ol>
+          </CardContent>
+        </Card>
+      </div>
+      
+    </div>
+     
+
+
+
+
+      </div>
+
+        )}
+      </div>
+
+
+
+      
+    </>
+  );
+};
+
+export default createComission;
diff --git a/packages/nextjs/app/createCrowdfunding/page.tsx b/packages/nextjs/app/createCrowdfunding/page.tsx
new file mode 100644
index 0000000..b4cdfcf
--- /dev/null
+++ b/packages/nextjs/app/createCrowdfunding/page.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import type { NextPage } from "next";
+import { useAccount } from "@starknet-react/core";
+import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
+import { SetStateAction, useState } from "react"
+import { Button } from "~~/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card"
+import { Input } from "~~/components/ui/input"
+import { Label } from "~~/components/ui/label"
+import { Textarea } from "~~/components/ui/textarea"
+import { Slider } from "~~/components/ui/slider"
+import { Switch } from "~~/components/ui/switch"
+import { Calendar, DollarSign, Users, Clock, Target } from "lucide-react"
+
+const createCrowdfunding: NextPage = () => {
+  const { address: connectedAddress, isConnected, isConnecting } = useAccount();
+
+  const [fundingGoal, setFundingGoal] = useState(10000)
+  const [duration, setDuration] = useState(30)
+
+  // Mock user's IP data
+  const userIPs = [
+    { id: "ip1", name: "AI-Powered Neural Interface" },
+    { id: "ip2", "name": "Quantum Encryption Algorithm" },
+    { id: "ip3", "name": "Sustainable Energy Converter" },
+  ]
+  return (
+    <>
+      
+      
+      
+      <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+
+
+
+        {!isConnected || isConnecting ? (
+          <CustomConnectButton />
+        ) : (
+         
+
+      <div className="max-w-10xl mx-auto">   
+
+      <h1 className="text-3xl font-bold mb-6">Create Crowdfunding Campaign</h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      
+      
+      <Card className="shadow bg-base-100">
+        <CardHeader>
+          <CardTitle>Campaign Details</CardTitle>
+          <CardDescription>Set up your intellectual property crowdfunding campaign</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="ip-select">Select Intellectual Property</Label>
+            <Input id="ip-select" placeholder="Select your IP" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="campaign-name">Campaign Name</Label>
+            <Input id="campaign-name" placeholder="Enter campaign name" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="campaign-description">Campaign Description</Label>
+            <Textarea id="campaign-description" placeholder="Describe your campaign and how the funds will be used" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="funding-goal">Funding Goal (USD)</Label>
+            <div className="flex items-center space-x-4">
+              <Input
+                id="funding-goal"
+                type="number"
+                value={fundingGoal}
+                onChange={(e) => setFundingGoal(Number(e.target.value))}
+                className="w-32"
+              />
+              <Slider
+                value={[fundingGoal]}
+                onValueChange={(value) => setFundingGoal(value[0])}
+                max={1000000}
+                step={1000}
+                className="flex-1"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="campaign-duration">Campaign Duration (Days)</Label>
+            <div className="flex items-center space-x-4">
+              <Input
+                id="campaign-duration"
+                type="number"
+                value={duration}
+                onChange={(e) => setDuration(Number(e.target.value))}
+                className="w-20"
+              />
+              <Slider
+                value={[duration]}
+                onValueChange={(value) => setDuration(value[0])}
+                max={90}
+                step={1}
+                className="flex-1"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Switch id="terms" />
+            <Label htmlFor="terms">I agree to the terms and conditions</Label>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full">Create Campaign</Button>
+        </CardFooter>
+      </Card>
+
+      <div className="mt-8 grid md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Campaign Benefits</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-4">
+              <DollarSign className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Raise Capital</h3>
+                <p className="text-sm text-muted-foreground">Secure funding for your intellectual property development</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Users className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Build Community</h3>
+                <p className="text-sm text-muted-foreground">Engage with supporters and potential customers</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Target className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Validate Market</h3>
+                <p className="text-sm text-muted-foreground">Gauge interest and demand for your innovation</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>How It Works</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ol className="list-decimal list-inside space-y-2">
+              <li>Create your campaign with details about your IP</li>
+              <li>Set your funding goal and campaign duration</li>
+              <li>Share your campaign with potential backers</li>
+              <li>Receive funds if your goal is met within the timeframe</li>
+              <li>Deliver on your promises and keep backers updated</li>
+            </ol>
+          </CardContent>
+        </Card>
+      </div>
+      
+    </div>
+     
+
+
+
+
+      </div>
+
+        )}
+      </div>
+
+
+
+      
+    </>
+  );
+};
+
+export default createCrowdfunding;
diff --git a/packages/nextjs/app/createListing/page.tsx b/packages/nextjs/app/createListing/page.tsx
new file mode 100644
index 0000000..8aae149
--- /dev/null
+++ b/packages/nextjs/app/createListing/page.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import type { NextPage } from "next";
+import { useAccount } from "@starknet-react/core";
+import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
+import { SetStateAction, useState } from "react"
+import { Button } from "~~/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card"
+import { Input } from "~~/components/ui/input"
+import { Label } from "~~/components/ui/label"
+import { Textarea } from "~~/components/ui/textarea"
+import { Select } from "~~/components/ui/select"
+import { Switch } from "~~/components/ui/switch"
+import { RadioGroup, RadioGroupItem } from "~~/components/ui/radio-group"
+import { Slider } from "~~/components/ui/slider"
+import { Tag, DollarSign, FileText, Briefcase, ShoppingBag, Users } from "lucide-react"
+
+const createListing: NextPage = () => {
+  const { address: connectedAddress, isConnected, isConnecting } = useAccount();
+
+  const [listingType, setListingType] = useState("sell")
+  const [price, setPrice] = useState(1000)
+
+  return (
+    <>
+      
+      
+      
+      <div className="flex justify-center flex-col pt-10" >
+
+
+
+        {!isConnected || isConnecting ? (
+          <CustomConnectButton />
+        ) : (
+         
+
+          <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">    
+
+  
+
+
+      {/*
+      <div className="container py-12 max-w-7xl mx-auto">
+
+
+        <section className="text-center py-10">
+          <h2 className="text-3xl font-bold mb-4">Ready to step up?</h2>
+          <p className="mb-6">Start trading intellectual property today!</p>
+          <div className="space-x-4">
+            <Button>
+              <Link href="/registerIP">Register New</Link>
+            </Button>
+            <Button variant="outline">
+              <Link href="/licensingIP">Licensing Your IP</Link>
+            </Button>
+          </div>
+        </section>
+        
+      </div>*/}
+          
+      
+
+
+
+      <div className="container">
+      <h1 className="text-3xl font-bold mb-6 text-center">Create New Listing</h1>
+      
+      <Card className="shadow bg-base-200">
+        <CardHeader>
+          <CardTitle>Listing Details</CardTitle>
+          <CardDescription>Create a new listing for your intellectual property</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="ip-select">Select Intellectual Property</Label>
+            <Input id="ip-select" type="text" placeholder="Enter your license type" />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Listing Type</Label>
+            <RadioGroup defaultValue="sell" onVolumeChange={setListingType}>
+              <div className="flex space-x-4">
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="sell" id="sell" />
+                  <Label htmlFor="sell">Sell</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="license" id="license" />
+                  <Label htmlFor="license">License</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="crowdfunding" id="crowdfunding" />
+                  <Label htmlFor="crowdfunding">Crowdfunding</Label>
+                </div>
+              </div>
+            </RadioGroup>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="listing-title">Listing Title</Label>
+            <Input id="listing-title" placeholder="Enter a catchy title for your listing" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="listing-description">Listing Description</Label>
+            <Textarea id="listing-description" placeholder="Describe your intellectual property and its potential applications" />
+          </div>
+
+          {listingType !== "crowdfunding" && (
+            <div className="space-y-2">
+              <Label htmlFor="price">Price (USD)</Label>
+              <div className="flex items-center space-x-4">
+                <Input
+                  id="price"
+                  type="number"
+                  value={price}
+                  onChange={(e) => setPrice(Number(e.target.value))}
+                  className="w-32"
+                />
+                <Slider
+                  value={[price]}
+                  onValueChange={(value: SetStateAction<number>[]) => setPrice(value[0])}
+                  max={1000000}
+                  step={100}
+                  className="flex-1"
+                />
+              </div>
+            </div>
+          )}
+
+          {listingType === "license" && (
+            <div className="space-y-2">
+              <Label htmlFor="license-type">License Type</Label>
+              <Input id="license-type" type="text" placeholder="Enter your license type" />
+            </div>
+          )}
+
+          {listingType === "crowdfunding" && (
+            <div className="space-y-2">
+              <Label htmlFor="funding-goal">Funding Goal (USD)</Label>
+              <Input id="funding-goal" type="number" placeholder="Enter your funding goal" />
+            </div>
+          )}
+
+          <div className="flex items-center space-x-2">
+            <Switch id="terms" />
+            <Label htmlFor="terms">I agree to the marketplace terms and conditions</Label>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full">Create Listing</Button>
+        </CardFooter>
+      </Card>
+
+      <div className="mt-8 grid md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Listing Benefits</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-4">
+              <Tag className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Increased Visibility</h3>
+                <p className="text-sm text-muted-foreground">Showcase your IP to a global audience of potential buyers and investors</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <DollarSign className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Monetization Opportunities</h3>
+                <p className="text-sm text-muted-foreground">Sell, license, or crowdfund your intellectual property</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <FileText className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Secure Transactions</h3>
+                <p className="text-sm text-muted-foreground">Blockchain-backed listings ensure transparency and security</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Listing Options</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-4">
+              <ShoppingBag className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Sell</h3>
+                <p className="text-sm text-muted-foreground">Transfer full ownership of your IP for a one-time payment</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Briefcase className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">License</h3>
+                <p className="text-sm text-muted-foreground">Grant usage rights while retaining ownership</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Users className="w-8 h-8 text-primary" />
+              <div>
+                <h3 className="font-semibold">Crowdfunding</h3>
+                <p className="text-sm text-muted-foreground">Raise funds for further development or commercialization</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+
+
+
+
+
+      </div>
+
+        )}
+      </div>
+
+
+
+      
+    </>
+  );
+};
+
+export default createListing;
diff --git a/packages/nextjs/app/licensingIP/page.tsx b/packages/nextjs/app/licensingIP/page.tsx
index ad10c03..7402314 100644
--- a/packages/nextjs/app/licensingIP/page.tsx
+++ b/packages/nextjs/app/licensingIP/page.tsx
@@ -109,7 +109,7 @@ const licensingIP: NextPage = () => {
                     id="ipSelect"
                     name="ipSelect"
                     onChange={(e) => handleIPSelection(mockIPs.find(ip => ip.id === parseInt(e.target.value)))}
-                    className="w-full rounded input input-bordered bg-base-200"
+                    className="w-full rounded input input-bordered bg-base-300"
                   >
                     <option value="">Select an IP</option>
                     {mockIPs.map((ip) => (
@@ -130,7 +130,7 @@ const licensingIP: NextPage = () => {
                     value={formData.licenseName}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded input input-bordered bg-base-200 "
+                    className="w-full rounded input input-bordered bg-base-300 "
                   />
                 </div>
                 <div className="grid grid-cols-2 gap-4">
@@ -145,7 +145,7 @@ const licensingIP: NextPage = () => {
                       value={formData.startDate}
                       onChange={handleInputChange}
                       required
-                      className="w-full rounded input input-bordered bg-base-200"
+                      className="w-full rounded input input-bordered bg-base-300"
                     />
                   </div>
                   <div>
@@ -159,7 +159,7 @@ const licensingIP: NextPage = () => {
                       value={formData.endDate}
                       onChange={handleInputChange}
                       required
-                      className="w-full rounded input input-bordered bg-base-200"
+                      className="w-full rounded input input-bordered bg-base-300"
                     />
                   </div>
                 </div>
@@ -173,7 +173,7 @@ const licensingIP: NextPage = () => {
                     value={formData.licenseType}
                     onChange={handleInputChange}
                     required
-                    className="w-full rounded input input-bordered bg-base-200"
+                    className="w-full rounded input input-bordered bg-base-300"
                   >
                     <option value="">Select a license type</option>
                     <option value="exclusive">Exclusive</option>
@@ -193,7 +193,7 @@ const licensingIP: NextPage = () => {
                     onChange={handleInputChange}
                     required
                     placeholder="e.g., Worldwide, North America, Europe"
-                    className="w-full rounded input input-bordered bg-base-200"
+                    className="w-full rounded input input-bordered bg-base-300"
                   />
                 </div>
                 <div>
@@ -208,7 +208,7 @@ const licensingIP: NextPage = () => {
                     onChange={handleInputChange}
                     required
                     placeholder="e.g., Manufacturing, Distribution, Sublicensing"
-                    className="w-full rounded input input-bordered bg-base-200"
+                    className="w-full rounded input input-bordered bg-base-300"
                   />
                 </div>
                 <div className="grid grid-cols-2 gap-4">
@@ -224,7 +224,7 @@ const licensingIP: NextPage = () => {
                       onChange={handleInputChange}
                       required
                       placeholder="Enter license fee"
-                      className="w-full rounded input input-bordered bg-base-200"
+                      className="w-full rounded input input-bordered bg-base-300"
                     />
                   </div>
                   <div>
@@ -237,7 +237,7 @@ const licensingIP: NextPage = () => {
                       value={formData.currency}
                       onChange={handleInputChange}
                       required
-                      className="w-full rounded input input-bordered bg-base-200"
+                      className="w-full rounded input input-bordered bg-base-300"
                     >
                       <option value="USD">USD</option>
                       <option value="EUR">EUR</option>
@@ -259,7 +259,7 @@ const licensingIP: NextPage = () => {
                     onChange={handleInputChange}
                     required
                     placeholder="Enter recipient name or company"
-                    className="w-full rounded input input-bordered bg-base-200"
+                    className="w-full rounded input input-bordered bg-base-300"
                   />
                 </div>
                 <div>
@@ -274,7 +274,7 @@ const licensingIP: NextPage = () => {
                     rows={4}
                     required
                     placeholder="Enter detailed license terms and conditions"
-                    className="w-full rounded input input-bordered bg-base-200"
+                    className="w-full rounded input input-bordered bg-base-300"
                   ></textarea>
                 </div>
                 <button
@@ -287,11 +287,11 @@ const licensingIP: NextPage = () => {
             </div>
   
             {/* Existing Licenses Column */}
-            <div className="bg-base-100 shadow-md rounded-lg p-6">
+            <div className="bg-base-300 shadow-md rounded-lg p-6">
               <h2 className="text-2xl font-semibold mb-6">Recent Licenses</h2>
               <div className="space-y-4">
                 {mockLicenses.map((license) => (
-                  <div key={license.id} className="flex items-center justify-between p-4 bg-base-300 rounded-md">
+                  <div key={license.id} className="flex items-center justify-between p-4 bg-base-100 rounded-md">
                     <div>
                       <h3 className="font-semibold">{license.name}</h3>
                       <p className="text-sm  ">
diff --git a/packages/nextjs/app/listingIP/page.tsx b/packages/nextjs/app/listingIP/page.tsx
index 44788a8..a55eeb7 100644
--- a/packages/nextjs/app/listingIP/page.tsx
+++ b/packages/nextjs/app/listingIP/page.tsx
@@ -3,101 +3,12 @@
 import type { NextPage } from "next";
 import { useAccount } from "@starknet-react/core";
 import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
-import { MyHoldings } from "~~/components/SimpleNFT/MyHoldings";
-import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
-import { useScaffoldWriteContract } from "~~/hooks/scaffold-stark/useScaffoldWriteContract";
-import { notification } from "~~/utils/scaffold-stark";
-import { addToIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
-import nftsMetadata from "~~/utils/simpleNFT/nftsMetadata";
 import { useState } from "react";
-
-
 import { Button } from "~~/components/ui/button"
-import { Input } from "~~/components/ui/input"
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card"
-import { Badge } from "~~/components/ui/badge"
-import { Search, Filter, ArrowUpDown, Settings } from "lucide-react"
 import Link from "next/link"
 
 const listingIP: NextPage = () => {
   const { address: connectedAddress, isConnected, isConnecting } = useAccount();
-  const [status, setStatus] = useState("Mint NFT");
-
-  const { writeAsync: mintItem } = useScaffoldWriteContract({
-    contractName: "YourCollectible",
-    functionName: "mint_item",
-    args: [connectedAddress, ""],
-  });
-
-
-  const [searchTerm, setSearchTerm] = useState('')
-
-      const listings = [
-        { id: 1, title: "The Batman Movie Critic", type: "Patent", price: "$50,000", status: "For Sale" },
-        { id: 2, title: "Avalon Game Soundtrack", type: "Trade Secret", price: "$75,000", status: "For License" },
-        { id: 3, title: "Stark Blue Secrect Paint", type: "Copyright", price: "$25,000", status: "For Sale" },
-        { id: 4, title: "Movie Website Logo", type: "Patent", price: "$100,000", status: "For License" },
-      ]
-    
-      const features = [
-        { title: "Secure Transactions", description: "Blockchain-powered security for all your IP transactions" },
-        { title: "Global Marketplace", description: "Connect with buyers and sellers from around the world" },
-        { title: "Smart Contracts", description: "Automated, transparent, and efficient deal execution" },
-        { title: "IP Valuation Tools", description: "Get accurate estimates for your intellectual property" },
-      ]
-
-
-      const filteredListings = listings.filter(listing =>
-        listing.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        listing.type.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        listing.status.toLowerCase().includes(searchTerm.toLowerCase())
-      )
-
-
-      
-
-  const { data: tokenIdCounter, refetch } = useScaffoldReadContract({
-    contractName: "YourCollectible",
-    functionName: "current",
-    watch: false,
-  });
-
-  const handleMintItem = async () => {
-    setStatus("Minting NFT");
-    // circle back to the zero item if we've reached the end of the array
-    if (tokenIdCounter === undefined) {
-      setStatus("Mint NFT");
-      return;
-    }
-
-
-
-      
-
-
-
-    const tokenIdCounterNumber = Number(tokenIdCounter);
-    const currentTokenMetaData =
-      nftsMetadata[tokenIdCounterNumber % nftsMetadata.length];
-    const notificationId = notification.loading("Uploading to IPFS");
-    try {
-      const uploadedItem = await addToIPFS(currentTokenMetaData);
-
-      // First remove previous loading notification and then show success notification
-      notification.remove(notificationId);
-      notification.success("Metadata uploaded to IPFS");
-
-      await mintItem({
-        args: [connectedAddress, uploadedItem.path],
-      });
-      setStatus("Updating NFT List");
-      refetch();
-    } catch (error) {
-      notification.remove(notificationId);
-      console.error(error);
-      setStatus("Mint NFT");
-    }
-  };
 
   return (
     <>
@@ -119,81 +30,23 @@ const listingIP: NextPage = () => {
 
 
           
-  <div className="container py-12 max-w-7xl mx-auto">
-
-
-
-      <h1 className="text-2xl font-bold mb-8">IP Listings Marketplace</h1>
-      
-      <div className="flex items-center space-x-4 mb-8">
-        <Input 
-          placeholder="Search listings..." 
-          className="flex-grow" 
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-        <Button variant="outline"><Filter className="mr-2 h-4 w-4" /> Filter</Button>
-        <Button variant="outline"><ArrowUpDown className="mr-2 h-4 w-4" /> Sort</Button>
+      <div className="container py-12 max-w-7xl mx-auto">
+
+
+        <section className="text-center py-10">
+          <h2 className="text-3xl font-bold mb-4">Ready to step up?</h2>
+          <p className="mb-6">Start trading intellectual property today!</p>
+          <div className="space-x-4">
+            <Button>
+              <Link href="/registerIP">Register New</Link>
+            </Button>
+            <Button variant="outline">
+              <Link href="/licensingIP">Licensing Your IP</Link>
+            </Button>
+          </div>
+        </section>
+        
       </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-        {filteredListings.map((listing) => (
-          <Card className="bg-main" key={listing.id}>
-            <CardHeader>
-              <CardTitle>{listing.title}</CardTitle>
-              <div className="flex justify-between items-center">
-                <Badge>{listing.type}</Badge>
-                <Badge variant="outline">{listing.status}</Badge>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <p className="text-2xl font-bold">{listing.price}</p>
-            </CardContent>
-            <CardFooter>
-              <Button className="w-full">View Details</Button>
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-
-
-      <hr></hr>
-      <br></br>
-      <br></br>
-
-      <section className="mb-12">
-        <h2 className="text-3xl font-bold mb-6">Features and Benefits</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {features.map((feature, index) => (
-            <Card key={index} className="bg-main">
-              <CardHeader>
-                <CardTitle>{feature.title}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p>{feature.description}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </section>
-
-      <br></br>
-      <hr></hr>
-      <br></br>
-
-      <section className="text-center py-10">
-        <h2 className="text-3xl font-bold mb-4">Ready to step up?</h2>
-        <p className="mb-6">Start trading intellectual property today!</p>
-        <div className="space-x-4">
-          <Button>
-            <Link href="/registerIP">Register New</Link>
-          </Button>
-          <Button variant="outline">
-            <Link href="/licensingIP">Licensing Your IP</Link>
-          </Button>
-        </div>
-      </section>
-    </div>
           
       
 
diff --git a/packages/nextjs/app/monetizeIP/page.tsx b/packages/nextjs/app/monetizeIP/page.tsx
index f69c8b4..8c22417 100644
--- a/packages/nextjs/app/monetizeIP/page.tsx
+++ b/packages/nextjs/app/monetizeIP/page.tsx
@@ -69,12 +69,13 @@ const monetizeIP: NextPage = () => {
             <CardDescription>Transfer ownership of your IP</CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="mb-4">List your intellectual property for sale on our marketplace to find potential buyers.</p>
+            <p className="mb-4">Create a sale contract to another address.</p>
             <Button variant="secondary" asChild>
-              <Link href="/marketplace">List</Link>
+              <Link href="/sellIP">Sell IP</Link>
             </Button>
           </CardContent>
         </Card>
+        {/*}
         <Card className="bg-base-300">
           <CardHeader>
             <CardTitle>Royalties</CardTitle>
@@ -86,7 +87,7 @@ const monetizeIP: NextPage = () => {
               <Link href="/">Explore</Link>
             </Button>
           </CardContent>
-        </Card>
+        </Card>*/}
         <Card className="bg-base-300">
           <CardHeader>
             <CardTitle>Crowdfunding </CardTitle>
@@ -95,7 +96,19 @@ const monetizeIP: NextPage = () => {
           <CardContent>
             <p className="mb-4">Launch a crowdfunding campaign to support the development or promotion of your intellectual property.</p>
             <Button variant="secondary" asChild>
-              <Link href="/">Start</Link>
+              <Link href="/createCrowdfunding">Start</Link>
+            </Button>
+          </CardContent>
+        </Card>
+        <Card className="bg-base-300">
+          <CardHeader>
+            <CardTitle>Marketplace </CardTitle>
+            <CardDescription>List your IP on our Marketplace</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4">Showcase and license your intellectual property on blockchain.</p>
+            <Button variant="secondary" asChild>
+              <Link href="/createListing">Start</Link>
             </Button>
           </CardContent>
         </Card>
diff --git a/packages/nextjs/app/registerIP/page.tsx b/packages/nextjs/app/registerIP/page.tsx
index 0d76bd8..46721a4 100644
--- a/packages/nextjs/app/registerIP/page.tsx
+++ b/packages/nextjs/app/registerIP/page.tsx
@@ -308,9 +308,9 @@ const uploadIP = () => {
 
 
 
-      <div className="bg-card bg-base-300 text-card-foreground rounded-lg shadow-lg p-6">
+      <div className="text-card-foreground rounded-lg p-6">
 
-        <div className="text-center py-2">
+        <div className="py-2">
           <h2 className="text-2xl font-semibold mb-2">Blockchain IP Protection Features</h2>
           <p className="text-muted-foreground mb-4">Secure, transparent, and efficient</p>
           </div>
diff --git a/packages/nextjs/app/sellIP/page.tsx b/packages/nextjs/app/sellIP/page.tsx
new file mode 100644
index 0000000..9f8bdac
--- /dev/null
+++ b/packages/nextjs/app/sellIP/page.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import type { NextPage } from "next";
+import { useAccount } from "@starknet-react/core";
+import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
+import { useScaffoldWriteContract } from "~~/hooks/scaffold-stark/useScaffoldWriteContract";
+import { notification } from "~~/utils/scaffold-stark";
+import { useState } from "react";
+import { Button } from "~~/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~~/components/ui/card"
+import { Input } from "~~/components/ui/input"
+import { Label } from "~~/components/ui/label"
+import { Textarea } from "~~/components/ui/textarea"
+import { ArrowRightLeft, ShieldCheck, Banknote } from "lucide-react"
+
+
+import Image from 'next/image'
+import Link from 'next/link'
+
+
+
+
+const sellIP: NextPage = () => {
+  const { address: connectedAddress, isConnected, isConnecting } = useAccount();
+  
+
+  return (
+    <>
+     
+     
+     <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+
+        {!isConnected || isConnecting ? (
+          <CustomConnectButton />
+        ) : (
+         
+
+          <div>
+
+<div className="container py-8">
+      <h1 className="text-3xl font-bold mb-6">Sell Your Intellectual Property</h1>
+      
+      <div className="grid  md:grid-cols-2 gap-8">
+        <Card className="shadow bg-base-100">
+          <CardHeader>
+            <CardTitle>Transfer/Sell IP Form</CardTitle>
+            <CardDescription>Create a smart transaction to securely transfer ownership or sell your intellectual property with blockchain technology. After initiating the sales transaction, the Address indicated in the contract will be able to finalize the purchase and claim your digital asset.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-4">
+              <div>
+                <Label htmlFor="ip-select">Select IP to Transfer/Sell</Label>
+                <select 
+                  id="type" 
+                  name="type" 
+                  className="w-full input input-bordered rounded bg-base-300">
+                  <option value="patent">Select IP</option>
+                </select>
+              </div>
+              <div>
+                <Label htmlFor="transaction-type">Transaction Type</Label>
+                <select 
+                  id="type" 
+                  name="type" 
+                  className="w-full input input-bordered rounded bg-base-300">
+                  <option value="patent">Sell Type</option>
+                  <option value="patent">Patent</option>
+                  <option value="trademark">Trademark</option>
+                  <option value="copyright">Copyright</option>
+                  <option value="trade_secret">Trade Secret</option>
+                </select>
+              </div>
+              <div>
+                <Label htmlFor="recipient">Recipient Wallet Address</Label>
+                <Input id="recipient" placeholder="Enter recipient's blockchain wallet address" className="w-full input input-bordered rounded bg-base-300" />
+              </div>
+              <div>
+                <Label htmlFor="price">Price (if selling)</Label>
+                <Input id="price" type="number" min="0" step="0.01" placeholder="Enter selling price in ETH" className="w-full input input-bordered rounded bg-base-300" />
+              </div>
+              <div>
+                <Label htmlFor="terms">Additional Terms</Label>
+                <Textarea id="terms" placeholder="Enter any additional terms or conditions" className="w-full input input-bordered rounded bg-base-300" />
+              </div>
+              <Button className="btn-default" type="submit">Initiate Transfer/Sale</Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Why Use Blockchain for IP Transfers?</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center space-x-4">
+                <ArrowRightLeft className="w-8 h-8 " />
+                <div>
+                  <h3 className="font-semibold">Seamless Transfers</h3>
+                  <p>Quick and efficient ownership transfers with blockchain verification</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-4">
+                <ShieldCheck className="w-8 h-8 " />
+                <div>
+                  <h3 className="font-semibold">Secure Transactions</h3>
+                  <p>Cryptographically secured transfers prevent fraud and disputes</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-4">
+                <Banknote className="w-8 h-8 " />
+                <div>
+                  <h3 className="font-semibold">Transparent Pricing</h3>
+                  <p>Clear and immutable record of sale prices and terms</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Transfer/Sale Process</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ol className="list-decimal list-inside space-y-2">
+                <li>Select the IP you want to transfer or sell</li>
+                <li>Choose the transaction type and set terms</li>
+                <li>Enter the recipient's blockchain wallet address</li>
+                <li>Set the price (for sales) or transfer conditions</li>
+                <li>Confirm the transaction with your digital signature</li>
+                <li>Buyer makes payment and claims digital assets</li>
+                <li>Blockchain records the transfer of ownership</li>
+              </ol>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+
+          </div>
+
+
+        )}
+
+
+       
+
+
+    </div>  
+    </>
+  );
+};
+
+export default sellIP;
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index b5d3ff4..5b92ca2 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -1,14 +1,10 @@
 import React from "react";
 
-import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
 import { devnet, sepolia, mainnet } from "@starknet-react/chains";
-import { Faucet } from "~~/components/scaffold-stark/Faucet";
-import { FaucetSepolia } from "~~/components/scaffold-stark/FaucetSepolia";
-import { BlockExplorerSepolia } from "./scaffold-stark/BlockExplorerSepolia";
-import { BlockExplorer } from "./scaffold-stark/BlockExplorer";
 import { Copyright, Twitter, Facebook, Linkedin, Instagram, CheckCircle } from 'lucide-react'
+import { AppFeaturesShowcase } from "~~/components/app-features-showcase"
 
 /**
  * Site footer
@@ -24,11 +20,18 @@ export const Footer = () => {
 
   return (
     
+
+    
+
     <footer className="bg-card text-card-foreground mt-8 py-8 px-4">
+        <div className="container mx-auto rounded">
+        <AppFeaturesShowcase/> 
+        </div>
+
         <div className="container mx-auto p-8 bg-base-100 rounded">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
             <div>
-              <h3 className="text-lg font-semibold mb-4">About Us</h3>
+              <h3 className="text-lg font-semibold mb-4">Mediolano.app</h3>
               <p className="text-sm text-muted-foreground">
                 We are dedicated to revolutionizing intellectual property protection through blockchain technology. Our platform ensures secure, transparent, and efficient IP management for creators worldwide.
               </p>
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index c55b7a8..2d444e7 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -38,7 +38,7 @@ export const menuLinks: HeaderMenuLink[] = [
     icon: <RectangleGroupIcon className="h-4 w-4" />,
   },
   {
-    label: "New IP",
+    label: "Register",
     href: "/registerIP",
     icon: <CubeIcon className="h-4 w-4" />,
   },
diff --git a/packages/nextjs/components/app-features-showcase.tsx b/packages/nextjs/components/app-features-showcase.tsx
new file mode 100644
index 0000000..c90e735
--- /dev/null
+++ b/packages/nextjs/components/app-features-showcase.tsx
@@ -0,0 +1,60 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~~/components/ui/card"
+import { Shield, Zap, DollarSign, Users, Globe, Lock } from "lucide-react"
+
+export function AppFeaturesShowcase() {
+  const features = [
+    {
+      icon: <Shield className="w-10 h-10 " />,
+      title: "Secure Blockchain Technology",
+      description: "Protect your intellectual property with cutting-edge blockchain security."
+    },
+    {
+      icon: <Zap className="w-10 h-10 " />,
+      title: "Fast Transactions",
+      description: "Experience lightning-fast IP transfers and licensing agreements."
+    },
+    {
+      icon: <DollarSign className="w-10 h-10 " />,
+      title: "Monetize Your IP",
+      description: "Unlock the full potential of your intellectual property through various monetization options."
+    },
+    {
+      icon: <Users className="w-10 h-10 " />,
+      title: "Global Marketplace",
+      description: "Connect with a worldwide network of IP buyers, sellers, and collaborators."
+    },
+    {
+      icon: <Globe className="w-10 h-10 " />,
+      title: "Cross-border Transactions",
+      description: "Seamlessly conduct IP transactions across international borders."
+    },
+    {
+      icon: <Lock className="w-10 h-10 " />,
+      title: "Smart Contracts",
+      description: "Automate and enforce IP agreements with blockchain-powered smart contracts."
+    }
+  ]
+
+  return (
+    <section className="py-10">
+      <div className="container mx-auto">
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
+            <Card key={index} className=" bg-base-300">
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  {feature.icon}
+                  <span className="ml-4">{feature.title}</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription>{feature.description}</CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/packages/nextjs/components/ui/label.tsx b/packages/nextjs/components/ui/label.tsx
index e69de29..3a64430 100644
--- a/packages/nextjs/components/ui/label.tsx
+++ b/packages/nextjs/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "~~/lib/utils"
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Label.displayName = "Label"
+
+export { Label }
\ No newline at end of file
diff --git a/packages/nextjs/components/ui/radio-group.tsx b/packages/nextjs/components/ui/radio-group.tsx
new file mode 100644
index 0000000..221ebab
--- /dev/null
+++ b/packages/nextjs/components/ui/radio-group.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cn } from "~~/lib/utils"
+
+export interface RadioGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {}
+
+const RadioGroup = React.forwardRef<HTMLFieldSetElement, RadioGroupProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <fieldset
+        ref={ref}
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    )
+  }
+)
+RadioGroup.displayName = "RadioGroup"
+
+export interface RadioGroupItemProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <label className={cn("flex items-center space-x-2", className)}>
+        <input
+          type="radio"
+          className="form-radio h-4 w-4 text-primary border-gray-300 focus:ring-2 focus:ring-primary"
+          ref={ref}
+          {...props}
+        />
+        <span>{children}</span>
+      </label>
+    )
+  }
+)
+RadioGroupItem.displayName = "RadioGroupItem"
+
+export { RadioGroup, RadioGroupItem }
\ No newline at end of file
diff --git a/packages/nextjs/components/ui/select2.tsx b/packages/nextjs/components/ui/select2.tsx
new file mode 100644
index 0000000..6e76258
--- /dev/null
+++ b/packages/nextjs/components/ui/select2.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { cn } from "~~/lib/utils"
+import { ChevronDown } from "lucide-react"
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div className="relative">
+        <select
+          className={cn(
+            "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </select>
+        <ChevronDown className="absolute right-3 top-3 h-4 w-4 opacity-50" />
+      </div>
+    )
+  }
+)
+Select.displayName = "Select"
+
+const SelectItem = React.forwardRef<
+  HTMLOptionElement,
+  React.OptionHTMLAttributes<HTMLOptionElement>
+>(({ className, ...props }, ref) => (
+  <option
+    ref={ref}
+    className={cn("relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)}
+    {...props}
+  />
+))
+SelectItem.displayName = "SelectItem"
+
+export { Select, SelectItem }
\ No newline at end of file
diff --git a/packages/nextjs/components/ui/slider.tsx b/packages/nextjs/components/ui/slider.tsx
new file mode 100644
index 0000000..ac52427
--- /dev/null
+++ b/packages/nextjs/components/ui/slider.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "~~/lib/utils"
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, ...props }, ref) => (
+    <input
+      type="range"
+      className={cn(
+        "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Slider.displayName = "Slider"
+
+export { Slider }
\ No newline at end of file
diff --git a/packages/nextjs/components/ui/switch.tsx b/packages/nextjs/components/ui/switch.tsx
new file mode 100644
index 0000000..9654f4a
--- /dev/null
+++ b/packages/nextjs/components/ui/switch.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "~~/lib/utils"
+
+export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, ...props }, ref) => (
+    <label className={cn("relative inline-flex items-center cursor-pointer", className)}>
+      <input
+        type="checkbox"
+        className="sr-only peer"
+        ref={ref}
+        {...props}
+      />
+      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+    </label>
+  )
+)
+Switch.displayName = "Switch"
+
+export { Switch }
\ No newline at end of file
diff --git a/packages/nextjs/tailwind.config.ts b/packages/nextjs/tailwind.config.ts
index 24d83ce..46ff4c4 100644
--- a/packages/nextjs/tailwind.config.ts
+++ b/packages/nextjs/tailwind.config.ts
@@ -85,7 +85,7 @@ module.exports = {
             background: "#000000",
           },
           ".bg-main": {
-            background: "rgba(255, 255, 255, 0.95)",
+            background: "rgba(255, 255, 255, 0.9)",
           },
           ".bg-underline": {
             background: