diff --git a/frontend/src/components/ClipConfig.tsx b/frontend/src/components/ClipConfig.tsx
index 6fe2519..97d676e 100644
--- a/frontend/src/components/ClipConfig.tsx
+++ b/frontend/src/components/ClipConfig.tsx
@@ -1,10 +1,12 @@
 import type { VideoMetadata } from "../utils/types.ts";
+import clsx from "clsx";
 
 type prop = {
     setMetadata: Function;
+    className?: string;
 }
 
-export default function ClipConfig({setMetadata}: prop) {
+export default function ClipConfig({setMetadata, className}: prop) {
     const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
         var vals = e.target.value.split(",");
         setMetadata((prevState: VideoMetadata) => ({
@@ -29,7 +31,7 @@ export default function ClipConfig({setMetadata}: prop) {
     }
 
     return (
-        <div className={"flex flex-col gap-2 p-10 rounded-md"}>
+        <div className={clsx("flex flex-col gap-2 p-10 rounded-md", className)}>
             <h2 className={"text-3xl font-bold text-gray-800 mb-4 underline"}>Clip Export Settings</h2>
             <div className="flex items-center gap-2">
                 <label htmlFor="resolution"
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index c91c814..3c9d879 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -4,7 +4,7 @@ import Playbar from "./../components/Playbar";
 import PlaybackSlider from "./../components/PlaybackSlider";
 import ClipRangeSlider from "./../components/ClipRangeSlider";
 import ClipConfig from "./../components/ClipConfig";
-import {editFile, getMetadata, processFile, getProgress} from "../utils/Endpoints"
+import {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
 import type { VideoMetadata } from "../utils/types.ts";
 import BlueButton from "../components/buttons/BlueButton.tsx";