diff --git a/src/App.tsx b/src/App.tsx
index c8ae364..96ff626 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import "./App.css";
 
 import { NextUIProvider } from "@nextui-org/react";
 import { PipedAPI } from "piped-api";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 import Trending from "./pages/trending";
 import { NavbarComponent } from "./components/navbar";
 
@@ -16,13 +16,13 @@ function App() {
 
   return (
     <NextUIProvider>
-      <BrowserRouter>
+      <HashRouter>
         <NavbarComponent />
         <Routes>
           <Route path="/" element={<Navigate to="/trending" />} />
           <Route path="/trending" element={<Trending />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </NextUIProvider>
   );
 }
diff --git a/src/components/video.tsx b/src/components/video.tsx
index 3447078..55e8f45 100644
--- a/src/components/video.tsx
+++ b/src/components/video.tsx
@@ -19,10 +19,10 @@ export function VideoComponent({ video }: VideoComponentProps) {
       <CardBody className="flex gap-3 flex-row">
         <Avatar className="flex-none" src={video.uploaderAvatar} />
         <div className="flex gap-3 flex-col">
-          <Link color="foreground" href={video.url}>
+          <Link color="foreground" href={`#${video.url}`}>
             {video.title}
           </Link>
-          <Link color="foreground" href={video.uploaderUrl}>
+          <Link color="foreground" href={`#${video.uploaderUrl}`}>
             <div className="flex flex-row items-center">
               <p className="flex-none text-md">{video.uploaderName}</p>
               {video.uploaderVerified && (