diff --git a/client-next/src/App.tsx b/client-next/src/App.tsx
deleted file mode 100644
index 728cacf6461..00000000000
--- a/client-next/src/App.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MapContainer } from './MapContainer.tsx';
-import { NavBarContainer } from './NavBarContainer.tsx';
-import { TripQueryContainer } from './TripQueryContainer.tsx';
-
-export function App() {
-  return (
-    <div className="app">
-      <NavBarContainer />
-      <TripQueryContainer />
-      <MapContainer />
-    </div>
-  );
-}
diff --git a/client-next/src/MapContainer.tsx b/client-next/src/components/MapView.tsx
similarity index 96%
rename from client-next/src/MapContainer.tsx
rename to client-next/src/components/MapView.tsx
index 75302dd30c9..b76dd2995ee 100644
--- a/client-next/src/MapContainer.tsx
+++ b/client-next/src/components/MapView.tsx
@@ -27,7 +27,7 @@ const initialViewState = {
   longitude: 10.2332855,
   zoom: 4,
 };
-export function MapContainer() {
+export function MapView() {
   return (
     <Map
       // @ts-ignore // TODO: why TypeScript complaining about this
diff --git a/client-next/src/NavBarContainer.tsx b/client-next/src/components/NavBarContainer.tsx
similarity index 100%
rename from client-next/src/NavBarContainer.tsx
rename to client-next/src/components/NavBarContainer.tsx
diff --git a/client-next/src/TripQueryContainer.tsx b/client-next/src/components/SearchBarContainer.tsx
similarity index 69%
rename from client-next/src/TripQueryContainer.tsx
rename to client-next/src/components/SearchBarContainer.tsx
index b8a672bf05c..99312f1b0e9 100644
--- a/client-next/src/TripQueryContainer.tsx
+++ b/client-next/src/components/SearchBarContainer.tsx
@@ -1,6 +1,6 @@
-import { useTripQuery } from './useTripQuery.ts';
+import { useTripQuery } from '../hooks/useTripQuery.ts';
 
-export function TripQueryContainer() {
+export function SearchBarContainer() {
   const [data, callback] = useTripQuery();
 
   return (
diff --git a/client-next/src/useTripQuery.ts b/client-next/src/hooks/useTripQuery.ts
similarity index 90%
rename from client-next/src/useTripQuery.ts
rename to client-next/src/hooks/useTripQuery.ts
index 190900ae896..1f45b2c2b50 100644
--- a/client-next/src/useTripQuery.ts
+++ b/client-next/src/hooks/useTripQuery.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
-import { graphql } from './gql';
+import { graphql } from '../gql';
 import request from 'graphql-request';
-import { TripQuery, TripQueryVariables } from './gql/graphql.ts';
+import { TripQuery, TripQueryVariables } from '../gql/graphql.ts';
 
 // TODO: make this endpoint url configurable
 const endpoint = `https://api.entur.io/journey-planner/v3/graphql`;
diff --git a/client-next/src/main.tsx b/client-next/src/main.tsx
index 69df4c40942..213c95318da 100644
--- a/client-next/src/main.tsx
+++ b/client-next/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { App } from './App.tsx';
+import { App } from './screens/App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/client-next/src/screens/App.tsx b/client-next/src/screens/App.tsx
new file mode 100644
index 00000000000..25f1c40b0a2
--- /dev/null
+++ b/client-next/src/screens/App.tsx
@@ -0,0 +1,13 @@
+import { MapView } from '../components/MapView.tsx';
+import { NavBarContainer } from '../components/NavBarContainer.tsx';
+import { SearchBarContainer } from '../components/SearchBarContainer.tsx';
+
+export function App() {
+  return (
+    <div className="app">
+      <NavBarContainer />
+      <SearchBarContainer />
+      <MapView />
+    </div>
+  );
+}